Angularjs登錄驗證：防止用戶導航到除登錄頁面和註冊頁面之外的其他頁面

Question

我正在爲我的前端使用AngularJS框架開發Web應用程序。對於我的登錄頁面，我必須阻止用戶瀏覽除登錄頁面和註冊以外的其他頁面。但是我現在所做的代碼，也阻止用戶導航到註冊頁面。以下是我的代碼。我該如何解決這個問題，以便使用戶無需登錄即可瀏覽登錄頁面和註冊頁面。

.run(function ($rootScope, $state, AuthService, AUTH_EVENTS) { 
    $rootScope.$on('$stateChangeStart', function (event,next, nextParams, fromState) { 

    if ('data' in next && 'authorizedRoles' in next.data) { 
     var authorizedRoles = next.data.authorizedRoles; 
     if (!AuthService.isAuthorized(authorizedRoles)) { 
     event.preventDefault(); 
     $state.go($state.current, {}, {reload: true}); 
     $rootScope.$broadcast(AUTH_EVENTS.notAuthorized); 
     } 
    } 

    if (!AuthService.isAuthenticated()) { 
     if (next.name !== 'login') { 
     event.preventDefault(); 
     $state.go('login'); 
     } 
    } 
    }); 

Answer 1

您可以通過添加在.state數據屬性一個布爾參數實現這一目標，我們說requiresAuth和檢查也.RUN塊;

下面

是爲

在的.config塊

$stateProvider 
    .state("register", { 
     url: '/register', 
     templateUrl: 'register.html', 
     controller:'UserController', 
     controllerAs: 'vm', 
     data: { 
      requiresAuth: false, 
      pageTitle: 'Register'     
     } 
}) 
.state("dashboard", { 
     url: '/dashboard', 
     templateUrl: 'dashboard.html', 
     controller:'OtherController', 
     controllerAs: 'vm', 
     data: { 
      requiresAuth: true, 
      pageTitle: 'Dashboard', 
      authorizedRoles: ['WHATEVER_ROLE'] 
     } 
}); 

和.RUN塊

var stateChangeStart = $rootScope.$on('$stateChangeStart', function(event, toState, toParams) { 
    if (AuthService.isAuthenticated()) { 
     // if user trying to access register/forgot page after login than redirect to dashboard 
     if (!toState.data.requiresAuth) { 
      event.preventDefault(); 
      $rootScope.$broadcast(AUTH_EVENTS.notAuthorized); 
     } 
     // user is not authenticated and trying to access page which is not permissible than send back to dashboard 
     if (angular.isDefined(toState.data.authorizedRoles)) { 
      var roles = toState.data.authorizedRoles; 
      AuthService.isAuthorized(roles).catch(function() { // NOTE: here we are only handling with .catch block 
       event.preventDefault(); 
       $rootScope.$broadcast(AUTH_EVENTS.notAuthorized); 
      }); 
     } 
    } 
    // user is not authenticated than redirect to login 
    else if (toState.data.requiresAuth) { 
     event.preventDefault(); 
     $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated); 
    } 
}); 

var notAuthenticated = $rootScope.$on(AUTH_EVENTS.notAuthenticated, function() { 
     $log.warn('not authenticated'); 
     $state.go('login', null, {}); 
     return; 
    }); 

    var notAuthorized = $rootScope.$on(AUTH_EVENTS.notAuthorized, function() { 
     $log.warn('not authorized'); 
     $state.go('dashboard'); 
     return; 
    }); 

    // DO NOT forget to destroy 
    $rootScope.$on('$destroy', notAuthenticated); 
    $rootScope.$on('$destroy', notAuthorized); 
    $rootScope.$on('$destroy', stateChangeStart);