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

最后这是我的 .运行块：

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");
      }
    });
  });

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

很抱歉 post 我的登录控制器丢失了，有：

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

Answer 1

您的登录方法return 用户通过身份验证时的成功承诺。所以..你可以这样编辑你的控制器：

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

尽情享受吧！

angularjs 中的身份验证机制

authentication mechanism in angularjs

angularjs

authentication

login

deferred

resolve