在 Angular 中授权检查访问

Question

我正在使用 git 使用的 Angular 网络应用程序模板。我无法理解我想验证用户是否具有授权的功能。不是吗？我的目标是拥有一个登录功能。获取响应并保存令牌。然后，当 $state 改变时，检查是否还有令牌。我能怎么做？这是代码：

core.js:

'use strict'; 

angular.module('app.core').controller('App', ['config', '$scope', '$state', '$rootScope', 'shortHistory','session', '$window', 'authorize', function(config, $scope, $state, $rootScope, shortHistory, session, $window, 'authorize') {

var vm = this;

vm.title = config.appTitle;

$scope.app = config;
$scope.$state = $state;
vm.currentUser = null;

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  authorize.checkAccess(event, toState, toParams);
});

$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
  $('body').toggleClass('nav-shown', false);
});

$rootScope.$on('$userSet', function(event, user) {
  vm.currentUser = user;
  $window.localStorage.setItem('token', vm.currentUser.token);
});

shortHistory.init($scope);

}]);

common.js:

(function() {
'use strict';

angular.module('app.common')
  .service('shortHistory', shortHistory)
  .service('session', session)
 // .service('authorize', authorize)
  .service('authenticationService', authenticationService);

shortHistory.$inject = ['$state'];
function shortHistory($state) {
  var history = this;

  function setItem(what, state, params) {
    history[what] = {
      state: state,
      params: params
    };
  }

  this.init = function(scope) {
    scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      setItem('from', fromState, fromParams);
      setItem('to', toState, toParams);
    });
  };

  this.goTo = function(where) {
    $state.go(history[where].state.name, history[where].params)
  };
}

session.$inject = ['$http', '$q', '$rootScope'];
function session($http, $q, $rootScope) {
  var session = this;

  this.fetchCurrentUser = function(url) {
    var userFetch;
    if (session.getCurrentUser()) {
      userFetch = $q(function(resolve) {
        resolve(session.getCurrentUser());
      });
    } else {
      userFetch = $http.get(url);
    }
    return userFetch;
  };

  this.getCurrentUser = function() {
    return this.user;
  };

  this.setCurrentUser = function(user) {
    this.user = user;
    $rootScope.$broadcast('$userSet', this.user);
  };
}
/* THIS IS THE CODE THAT I'VE NOT TOUCHED, IT WAS IN THE TEMPLATE
authorize.$inject = ['session', '$state', '$urlRouter', '$rootScope'];
function authorize(session, $state, $rootScope) {
  this.checkAccess = function(event, toState, toParams) {
    if (!session.getCurrentUser() && !(toState.data && toState.data.noAuth)) {
      event.preventDefault();
      session.fetchCurrentUser('api/sers')
        .success(function(user) {
          session.setCurrentUser(user);
          $state.go(toState.name, toParams);
        })
        .error(function() {
          $state.go('login');
        });
      }
  };
}
*/
authenticationService.$inject = ['$http', '$rootScope', 'session', '$state'];
function authenticationService($http, $rootScope, session) {
  var vm = this;
  vm.loginError = '';
  this.login = function(user) {
    var userData = {
      email: user.email,
      password: user.password
    }
    return $http.post('api/login/', userData)
      .success(function(data) {
        var loggedUser = jQuery.extend(data, userData);
        session.setCurrentUser(loggedUser);
        $rootScope.$broadcast('$userLoggedIn');
      });
  };

  var token = localStorage.getItem('token');

  this.logout = function() {
    return $http.post('api/logout/', token)
      .success(function(data) {
        session.setCurrentUser(null);
        $rootScope.$broadcast('$userLoggedOut');
      });
  }
}

})();

Auth.js:

 (function() {
 'use strict';

 angular.module('app.profile')
  .controller('LoginController', loginController)
  .run(runAuth);

loginController.$inject = ['authenticationService'];
function loginController(
  authenticationService
  ) {
  var vm = this;
  vm.user = {};
  vm.loginError = '';

  this.login = function() {
    authenticationService.login(vm.user)
      .then(null, function(err) {
        vm.loginError = err.data.result;
      });
  };
}

runAuth.$inject = ['$rootScope', '$state', 'authenticationService'];
function runAuth($rootScope, $state, authenticationService) {
  $rootScope.logout = authenticationService.logout;
  $rootScope.$on('$userLoggedIn', function() {
    $state.go('app.dashboard');
  });
  $rootScope.$on('$userLoggedOut', function() {
    $state.go('login');
  });
}
})();

profile.module.js:

'use strict';

angular.module('app.profile', ['ui.router'])

.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      data: {
        noAuth: true
      },
      templateUrl: 'app/modules/profile/auth/login.html',
      controller: 'LoginController',
      controllerAs: 'vm'
    })
    .state('app.profile', {
      url: '/profile',
      templateUrl: 'app/modules/profile/edit/edit.html',
      controller: 'ProfileController',
      controllerAs: 'vm'
    });
  }]);

原项目是这样的：https://github.com/flatlogic/angular-dashboard-seed 我无法理解该身份验证的工作原理以及在何处插入控制器以进行身份验证。例如，现在，我无法登录，但无法注销，即使我没有令牌，我也可以正确转到 /dashboard 或 /profile，只有登录用户才能查看。

Answer 1

你这里有很多代码，但我觉得你的问题可以从理论上回答，而不是用更多的代码！

使用后端服务器设置 session 信息（通常是 HTTP header 中的 cookie），然后不要在 AngularJS 代码中进行任何本地操作。我看到您正在检查本地存储的某些区域。让后端将仅 HTTP 标志设置为 true 并在不知道 session id
利用拦截将 401 ajax 请求重定向到您的登录页面。这将允许您处理 session 超时、未经授权的路由访问等实例。一个非常简单的处理程序，将简化大部分重定向逻辑 https://docs.angularjs.org/api/ng/service/$http#interceptors
根据您的路由（看起来您正在使用 UI 路由器），您可以根据从您的身份验证服务返回的用户管理对特定路由的权限。我遇到的最简洁的实现利用了 UI 路由器和嵌套状态。需要身份验证的状态配置了一个根 "resolve" 参数，用于执行用户 session 的验证（可能只是一个简单的 HTTP GET 到受保护端点以确定用户是否已通过身份验证）。当您需要了解任何给定控制器中的用户时，您将真正欣赏这种架构，并且您始终可以知道您的用户服务已经弄清楚了（并且无需依赖广播）

例如：

$stateProvider
  .state('rootProtected', {
    templateUrl: '/js/views/rootProtected.html',
    resolve: {
      data: function(coreuser) {
        return user.initialize();
      }
    }
  })
  .state('rootProtected.userProfile', {
    templateUrl: '/js/views/userProfile.html'
  })
  .state('public', {
    templateUrl: '/js/views/login.html'
  });

尽量不要围绕 session 管理创建太多 services/factories。我在整个互联网的教程中看到了这一点。实际上，只需创建一个核心用户服务，让用户登录、注销、验证用户、获取用户等。您将开始意识到很多数据是相互关联的，没有理由将逻辑分散在它们之间多个服务或广播事件。

在 Angular 中授权检查访问

Authorize check access in Angular

javascript

http

xmlhttprequest

angularjs

angular-http-interceptors