angularjs中的身份验证机制

Question

我是 AngularJS 的新手，我已经阅读了关于使用 Angular js 进行登录和身份验证的教程，但我仍然对我的代码的许多方面感到困惑，现在我已经到达登录并在浏览器的会话中存储一个令牌，但我登录后无法重定向到主页， 这是我的服务：

function authenticationSvc ($http, $q, $window, auth_uri) {

  var userInfo;

  function login(username, password) {

    var deferred = $q.defer();

    $http.post(auth_uri, {
      username: username,
      password: password
    }).then(function(result) {

      userInfo = {
        accessToken: result.data.token
      };

      $window.sessionStorage["pallas_token"] = result.data.token;

      deferred.resolve(userInfo);
    }, 
    function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  function getUserInfo() {
    return userInfo;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };

};

这是我的状态配置

.state('dashboard', {
  url:'/dashboard',
  controller: 'HomeController',
  templateUrl: 'partials/dashboard/main.html',
  resolve:{
    auth: function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();                    
      if (userInfo) {                      
        return $q.when(userInfo);

      } else {
        return $q.reject({ authenticated: false });
      }
    }
  }
} 

最后这是我的 .run 块：

angular
  .module ( 'mainApp' )
  .run ( function ( $rootScope, $state, $location) {

    $rootScope.$on('$stateChangeSuccess', function( userInfo) {
      console.log( userInfo );            
    });

    $rootScope.$on('$stateChangeError', function(evt, toState, toParams, fromState, fromParams, error) {
      if (error.authenticated == false) {      
        $state.transitionTo("login");
      }
    });
  });

请帮我解决这个问题，我需要帮助我的朋友:(

很抱歉错过了发布我的登录控制器，有：

function LoginController($scope, $state, authenticationSvc){ 
  $scope.submit = function(credentials){ 
    authenticationSvc.login(credentials.username, credentials.password); 
  };
};

Answer 1

当用户通过身份验证时，您的登录方法会返回成功承诺。所以..你可以用这种方式编辑你的控制器：

function LoginController($scope, $state, authenticationSvc){ 
  $scope.submit = function(credentials){ 
    authenticationSvc.login(credentials.username, credentials.password).then(function(){
      $state.go('dashboard');
      console.log('User logged in!');
    }).catch(function(){
      console.log('User NOT logged in!');
    }); 
  };
};

更新

要在页面刷新后保持状态，您需要从 sessionStorage 恢复 userInfo 对象。我还添加了注销逻辑！看看：

function authenticationSvc ($http, $q, $window, auth_uri) {

  var userInfo;

  function login(username, password) {
    ...
  }

  function logout() {
    $window.sessionStorage.removeItem("pallas_token");
    userInfo = null;
  }

  function getUserInfo() {
    return userInfo;
  }

  function init(){
    if ($window.sessionStorage["pallas_token"]){
      userInfo = {
        accessToken: $window.sessionStorage["pallas_token"]
      };    
    }
  }

  init();

  return {
    login: login,
    logout: logout,
    getUserInfo: getUserInfo
  };

};

退出：

function LoginController($scope, $state, authenticationSvc){ 
  $scope.submit = function(credentials){ 
    ...
  };

  $scope.logout = function(){
    authenticationSvc.logout();
    $state.go('login');
    console.log('User logged out!');
  };
};

享受吧！