授权 header 仍在使用从本地存储中删除的 Json Web 令牌

Question

我根据每个请求在授权 header 中传递一个 Json Web 令牌，并将其存储在本地存储中。当用户单击 "Logout" 时，它会删除本地存储中的令牌，我什至将其登录到控制台，它显示为空。但在下一次请求时，授权 header 仍将使用 Json Web 令牌，即使它已被删除。直到我点击浏览器上的刷新按钮，它才会生效并且请求将开始使用更新的值。我正在使用 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.');
      }
        });

这就是我设置授权 header 和删除本地存储的方式：

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()" 检查用户是否已登录由于授权 header 仍在使用旧的 JWT，它表示用户已登录。只有在我手动刷新页面时它才会起作用。

我在谷歌上搜索了好几个小时，但找不到任何东西。当我在控制台中从 localstorage 记录 'jwt' 时，它显示 null 但是当我在 Chrome 的开发人员工具中检查请求时，它显示请求仍在使用旧的 json 网络令牌.

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

感谢任何帮助！

Answer 1

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

届时删除或更改存储的令牌将不会对默认的 headers 做任何事情。

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

Answer 2

您需要放置在 app.js 配置块内。

授权 header 仍在使用从本地存储中删除的 Json Web 令牌

Authorization header still using deleted Json Web Token from local storage

javascript

angularjs

json

authentication

json-web-token