AngularJS：检查用户角色以决定用户是否有权限查看页面

Question

AngularJS：检查用户角色以决定用户是否有权限查看页面

3

我有一个身份验证机制的问题。我需要调用API来获取当前用户的角色，然后检查以决定用户可以查看我的应用程序的哪些页面。我的想法是，在myApp.run块中调用API，然后进行检查：

angular.module('MyApp')
.run(['$rootScope', 'authenService', '$location', function($rootScope, authenService, $location) {
    var currentUser;

    function checkRole() {
      if(angular.isDefined(currentUser) && angular.isObject(currentUser) && ... && currentUser.isAdmin && $location.url() === '/dashboard') {
        return true;
      }
      return false;
    }
    /*
    ** @name: getCurrentUser
    ** @description: get current user info, use promise $q
    */
    authenService.getCurrentUser()
     .then(function getSuccess(currentUserInfo){
       currentUser = currentUserInfo;
       //if user is not admin and current page is not dashboard page, redirect to dashboard page
       if(!checkRole()) {
         $location.path('/dashboard');
       }
      }, function getError(){});

    //when user go to new path, check role if user have permission to access new page or not
    $rootScope.$on('$routeChangeStart', function onRouteChange() {
       if(!checkRole()) {
         $location.path('/dashboard');
       }
    })
}];

我的问题: 当getCurrentUser API正在进行（仍未从服务器接收到响应）时，$rootScope.$on('$routeChangeStart')代码被执行，并且总是将用户重定向到dashboard页面。我该怎么办？您有任何解决此问题的想法/解决方案吗？或者在等待服务器响应后如何运行UserCtrl控制器（当用户转到/user时，由于没有接收到响应，UserCtrl将不执行checkRole)。

编辑

我真正想做的事情是当用户转到mySite.com时，我会调用一个API来获取用户角色。请求仍在进行中，但某种方式用户转到了mySite.com/#/user，用户页面立即显示在web中(要求用户在请求完成之前不能看到用户页面)。请求完成后，如果用户没有权限，将重定向用户到mySite.com/#/dashboard。

解决方案

我展示加载屏幕以阻止我的应用程序直到请求完成。感谢您的帮助。

- Thai Tran

1

使用 $q：https://docs.angularjs.org/api/ng/service/$q - MoLow

可能是重复的问题：如何在AngularJS中等待$http请求的响应？ - Manish Kr. Shukla

@MoLow：我如何使用$q解决我的问题？例如：用户输入地址mysite.com/#/user，Angular将导航到用户页面（user.html），并执行UserCtrl控制器。 - Thai Tran

@TechMa9iac: 我不这么认为。它无法解决我的问题。不管怎样，谢谢你。我只是编辑了标题。:( - Thai Tran

我添加了一个带有一些代码的答案来完成您所需的功能。希望能对您有所帮助。 - MoLow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MoLow · Answer 1

尝试使用 $q 服务：

angular.module('MyApp')
.run(['$rootScope', 'authenService', '$location', '$q', function($rootScope, authenService, $location, $q) {
    var currentUser;

    function checkRole() {
      var defered = $q.defer();
      if(angular.isDefined(currentUser) && angular.isObject(currentUser)){
         defered.resolve(currentUser.isAdmin && ($location.url() === '/dashboard')) 
      }else{
          authenService.getCurrentUser().then(function getSuccess(currentUserInfo){
              currentUser = currentUserInfo;
              defered.resolve(currentUser.isAdmin && ($location.url() === '/dashboard')) 
          });
      }
      return defered.promise;
    }

    $rootScope.$on('$routeChangeStart', function onRouteChange() {
       checkRole().then(function(isAdmin){
         if(isAdmin) $location.path('/dashboard');
       })
    })
}];