AngularJS: check user role to decide if user has permission to view pages or not.

I have a problem with the authentication mechanism. I have to call the API to get the current user roles and then check it to decide that the user can view the pages of my application. My idea is to call the API in the myApp.run block and then check:

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');
       }
    })
}];

      

My problem : When I run the getCurrentUser API (still not getting a response from the server), the $ rootScope code is executed. $ on ('$ routeChangeStart') is executed and always redirects the user to the dashboard page, What should I do? Do you have any ideas / solutions to solve this problem? or How to wait for a response from the server and then run the UserCtrl controller (when the user navigates to / user, UserCtrl will execute without checkRole because no response has been received).

EDIT

What I really want to do is when the user navigates to mySite.com, I will call the API to get the custom roles. The request is still in progress, but somehow the user navigates to mySite.com/#/user, the user page is displayed on the internet immediately ( Requirement: the user cannot see the user page until the request completes ). After the request completes, the user will be redirected to mySite .com / # / dashboard if user does not have permission.

DECISION

I will show a loading screen to lock my app until the request completes. Thank you for your help.

+3


source to share


1 answer


try using $ q service:



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');
       })
    })
}];

      

0


source







All Articles