javascript - 在 Angular 中授权检查访问

Question

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

核心.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);

}]);

通用.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');
  });
}
})();

配置文件.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我无法理解该身份验证的工作原理以及在何处插入 Controller 以进行身份​​验证。例如，现在，我无法登录，也无法注销，即使我没有 token ，我也可以正确转到/dashboard 或/profile，这应该仅供登录用户查看。

Answer 1

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

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

例如:

$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 管理创建太多服务/工厂。我在整个互联网的教程中看到了这一点。实际上，只需创建一个核心用户服务，让用户登录、注销、验证用户、获取用户等。您将开始意识到很多数据是相互关联的，没有理由将逻辑分散在它们之间多项服务或广播事件。