在提供模板之前,Angular会检查用户的身份验证

Angular check authenticate user, before the template is served

本文关键字:Angular 检查 用户 身份验证      更新时间:2023-09-26

当路由改变时,我尝试访问/settings

 .when('/settings', {
    templateUrl: 'partials/settings',
    controller: 'SettingsCtrl',
    authenticate: true
  })
.run(function ($rootScope, $location, Auth) {
  $rootScope.$on('$routeChangeStart', function (event, next) {
    Auth.checkUser();
    if (next.authenticate && !Auth.isLoggedIn()) {
       $location.path('/login');
    }
  });

代码调用Auth.checkUser() (Asynch),然后调用Auth.isLoggedIn()。问题是,我需要等待Auth.checkUser(),它为我提供了正确的用户状态,或者在提供模板之前找到一种检查响应的方法。

 checkUser: function(user, callback) {
    var cb = callback || angular.noop;    
    return User.check(user,
      function(user) {
        $rootScope.currentUser = user.id;
        return cb(user);
      },
      function(err) {
        return cb(err);
      }).$promise;
  },
  isLoggedIn: function() {
    var user = $rootScope.currentUser;
    return !!user;
  }

你应该使用angularjs控制器的resolve机制。这样,你就可以在渲染控制器之前定义它的任何先决条件(服务注入、等待承诺等)。

  • 参见angular doc: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
  • 查看angular-app项目中的工作示例:https://github.com/angular-app/angular-app/tree/master/client/src/common/security

的例子:

.when('/settings', {
    templateUrl: 'partials/settings',
    controller: 'SettingsCtrl',
    authenticate: true,
    resolve: {
        isUserLogged: ['yourservice' , function(yourservice) {
            return yourservice.isUserLoggedPromise();
        }]
    }
  })

你的屏幕只会在(如果)isUserLoggedPromise被解析