Angular：处理重新加载页面和用户身份验证

Question

我一直在使用一个记录用户的应用程序。一旦用户登录，用户的信息就会存储在服务中，并且 cookie 会与身份验证令牌一起存储。 像这样：

angular
 .module('MyModule')
 .service('AuthService', service);

service.$inject = ['$cookieStore', '$resource'];

function service($cookieStore, $resource){
  var self = this,
      user = null; 

  self.loginResource = $resource('my_path_to_login_resource');

  self.login = login;
  self.getUser = getUser;
  self.reloadUser = reloadUser; 


  function login(_userCredentials){
    var userResource = new self.loginResource(_userCredentials);
    return userResource.$save()
           .then(setUser);
  }

  function setUser(_userResponse){
    user = _userResponse.toJSON();
  }

  function getUser(){
    return user;
  }

  function reloadUser(_token){
    return self.loginResource()
            .get(_token)
            .then(setUser);
  }

}

当我需要处理应用程序的路由时使用 ui-router 我这样做： 有角度的 .module('我的模块') .run(runFn);

  runFn.$inject = ['$state', '$rootScope', 'AuthService', '$cookieStore'];
  function runFn($state, $rootScope, AuthService, $cookieStore) {

    $rootScope.$on('$stateChangeSuccess', stateTransitioned);

    function stateTransitioned(e, toState, toParams, fromState, fromParams) {
      var pageRealoaded = fromState.name? false : true;
      if(AuthService.getUser()){
        //DEALING WITH STATES TRANSITIONS
      }
      else{
         if($cookieStore.get('auth_token') && pageRealoaded){

            //ENSURE THAT THE USER IS LOGGED WHEN THE STATE IS CHANGED
            AuthService.reloadUser.then(function(){
              $state.go(toState.name);
            })
            .catch($state.go.bind(null,'login'));


           //I DON'T KNOW HOW AVOID THAT THE STATE IS LOADED UNTIL THE USER
           //HAVE BEEN LOGGED
         }
         else{
           $state.go('login');
         }
      }

    }
  }

当页面重新加载时，使用存储的令牌，我尝试等待该用户已登录，然后，如果成功，则重定向到状态toState.name，如果错误，则重定向到登录。 我的问题：

1.如何避免在用户登录之前加载状态？

2。我处理这种情况的架构是否正确？对更好结构的建议？

Answer 1

我建议您使用 ui-router 的解析功能来确保用户在进入状态之前始终经过身份验证。

在此处查看 ui-router wiki： https://github.com/angular-ui/ui-router/wiki#resolve

这样的事情应该会阻止身份验证之前的状态输入。

.state('secure', {
    resolve: {
        user: function(AuthService, $state) {
            // State will only be entered if this resolves.
            return AuthService.resolveUser()
                .catch(function(error) {
                    $state.go('login');
                })
       }
    },
    template: '<div>Secret Page</div>
})

我还将这支笔与一个工作示例放在一起： http://codepen.io/marcus-r/pen/eZKbYV?editors=1010

Answer 2

最后，对于我的第一个问题，我创建了以下示例，展示了我如何防止状态更改，直到用户成功登录。

http://codepen.io/gpincheiraa/pen/zqLYZz

在这个例子中，当我转到“state3”时，我等到用户登录，然后重定向到状态

angular
  .module('exampleApp', ['ui.router']);

angular
  .module('exampleApp')
  .config(configFn);

configFn.$inject = ['$stateProvider', '$urlRouterProvider'];

    function configFn($stateProvider, $urlRouterProvider){
      $urlRouterProvider.otherwise('state1');
        $stateProvider
         .state('state1', {
             url: '/state1',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
                 vm.goTwo = function(){$state.go('state2');};
             }] ,
             controllerAs: 'one',
             template: '<h1>{{one.current}}</h1><button ng-click="one.goTwo()">Go to state 2</button>'
         })
        .state('state2', {
             url: '/state2',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
                 vm.goThree = function(){$state.go('state3');};
             }] ,
             controllerAs: 'two',
             template: '<h1>{{two.current}}</h1><button ng-click="two.goThree()">Go to state 3</button>'
         })
        .state('state3', {
             url: '/state3',
           controller: ['$state', function($state){
               var  vm = this;
                 vm.current = $state.current.name;
             }] ,
             controllerAs: 'three',
             template: '<h1>{{three.current}}</h1>'
         })

    }

    angular
     .module('exampleApp')
     .run(runFn);
    runFn.$inject  = ['$rootScope','$timeout','$state'];
    function runFn($rootScope, $timeout, $state){

        var logged = false;

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
            console.log(toState.name);
            if(toState.name === 'state3' && !logged){

                //Fake like a user take a 1 second to login in server
                $timeout(function(){
                    logged = true;
                    console.log('login ok');
                    $state.go(toState.name);
                },1000)
                console.log('while the user not loggin, prevent the state change');
                event.preventDefault();
            }

        })


        }