授权标头仍在本地存储

时间:2016-07-11 02:38:14

标签: javascript angularjs json authentication json-web-token

我在每次请求时都在Authorization标头中传递一个Json Web Token,并将其存储在Local Storage中。当用户点击" Logout"时,它会删除本地存储中的令牌,我甚至会将其记录在控制台中,并显示为null。但是在下一次请求时,即使删除了Authorization标头,它仍然会使用Json Web Token。直到我点击浏览器上的刷新按钮它才会生效,请求将开始使用更新的值。我正在使用Angular.js构建单页应用程序。

这就是我设置本地存储的方式:

User.authUser($scope.credentials).then(function(res) {

        console.log(res);

      if(res.success === true){

                 console.log('User is authenticated!');
                 localStorage.setItem('jwt', JSON.stringify(res.token));

      } else {

        console.log('User is NOT authenticated.');
      }
        });

这就是我设置Authorization标头和删除本地存储的方式:

angular.module('App.user', [])
    .factory('User', function($http, $location, $state, $window) {

    var jwt = localStorage.getItem('jwt');

    $http.defaults.headers.common.Authorization = JSON.parse(jwt);

    var apiUrl = 'http://localhost:8080/api';

  return {


    authUser: function(credentials) {
        return $http.post(apiUrl + '/authenticate', credentials).then(function(res){
            return res.data;
        });
    },

    getMe: function() {
        return $http.get(apiUrl + '/users/me').then(function(res) {
            return res.data;
        });
    },

        logOut: function(){
            console.log('Logging user out');
            localStorage.removeItem('jwt');
            $state.go('home');
        }

  };

});

在每个页面上,我使用User.getMe()上面的方法来检查用户是否有效。所以其中一个问题是当用户登录他们的个人资料,然后他们点击退出(删除存储),他们被重定向到主页但主页使用" User.getMe()&#34 ;检查用户是否已登录,并且由于Authorization标头仍在使用旧的JWT,它表示用户已登录。它仅在我手动刷新页面时有效。

我用谷歌搜索了几个小时,但找不到任何东西。当我登录' jwt'来自控制台中的localstorage,它显示为null但是当我在Chrome的开发者工具中检查请求时,它显示请求仍在使用旧的json网络令牌。

我想也许这些页面正在被缓存,这就是为什么我试图关闭缓存,但这没有帮助。

感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

原因是您已将其分配给$http.defaults.headers

此时,删除或更改存储的令牌将不会对默认标头执行任何操作。

使用httpInterceptor设置标题可以解决这个问题

答案 1 :(得分:-1)

您需要在cofig块内的app.js中放置。