重新加载页面时，Angular JWT身份验证失败

Question

我正在尝试通过令牌对用户进行身份验证。 如果我登录，那么令牌将被创建并存储在本地存储中。 每当路线发生变化时，我都会点击express js中内置的api，从而为我提供解码后的用户价值。 一切正常，无需刷新页面。 刷新页面后，我将无法访问该API。 为了获得解码后的用户值，我想单击header中的登录按钮，这会触发路由更改，然后一切正常。 请帮帮我。

.controller('mainController', function($rootScope, $location, $window ,Auth){

        var vm = this;
        $rootScope.loggedIn = Auth.isLoggedIn();
        $rootScope.$on('$locationChangeStart', function(){
          $rootScope.loggedIn = Auth.isLoggedIn();
            Auth.getUser()
                .then(function(data){
                    $rootScope.user = data.data;
                });
        });

        vm.login = function(){
        ......
        }

        vm.logout = function(){
        ......
        }
}) 

服务

.factory('Auth', function($http, $q, AuthToken){
    var authFactory = {};

    authFactory.login = function(username, password){

        return $http.post('/api/login', {
            username: username,
            password: password
        })
        .success(function(data){
            AuthToken.setToken(data.token);
            return data;
        });
    };

    authFactory.logout = function(){
        AuthToken.setToken();
    };

    authFactory.isLoggedIn = function(){
        if(AuthToken.getToken()){
            return true;
        } else {
            return false;
        }
    };

    authFactory.getUser = function(){
        if(AuthToken.getToken()){
            return $http.get('/api/me');
        } else {
            return $q.reject({ message: "User has no token"});
        }
    };

    return authFactory;
})

设置令牌和拦截器代码的工厂

.factory('AuthToken', function($window){
    var authTokenFactory = {};

    authTokenFactory.getToken = function(){
        return $window.localStorage.getItem('token');
    };

    authTokenFactory.setToken = function(token){

        if(token){
            $window.localStorage.setItem('token', token);
        } else {
            $window.localStorage.removeItem('token');
        }
    };

    return authTokenFactory;
})

.factory('AuthInterceptor', function($q, $location, AuthToken){
    var interceptorFactory = {};

    interceptorFactory.request = function(config){
        var token = AuthToken.getToken();

        if(token){
            config.headers['x-access-token'] = token;
        }

        return config;
    };

    interceptorFactory.responseError = function(response){
        if(response.status == 403){
            $location.path('/login');
        }
        return $q.reject(response);
    };

    return interceptorFactory;

});

Answer 1

可能是您必须在刷新时重置$ http默认头。 在我的情况下使用cookie，我在$ on（'$ stateChangeStart'）的开头调用以下函数：

service.RefreshGlobalVars = function () {
    if ($http.defaults.headers.common.RefreshToken == null) {
        $http.defaults.headers.common.Authorization = "Bearer " + $cookieStore.get('_Token');
        $http.defaults.headers.common.RefreshToken = $cookieStore.get('_RefreshToken');
    }
   };

编辑-澄清一下，因为我没有看到您的setToken（）函数，所以您的实现可能会有所不同，但这几乎是它的要旨。

Answer 2

我得到了答案，通过在run块中检查主app.js中的路由更改来解决它。

MyApp.run(function ($rootScope, $location, Auth){

  $rootScope.loggedIn = Auth.isLoggedIn();
    $rootScope.$on('$locationChangeStart', function(){
      $rootScope.loggedIn = Auth.isLoggedIn();
        Auth.getUser()
            .then(function(data){
                $rootScope.user = data.data;
            });
    });