如何使用angularjs中的拦截器刷新JWT令牌？

Question

我在Lumen中使用我的应用程序后端实现,每次用户登录时都会给出一个JWT令牌.前端我使用Angular将令牌保存在本地存储中,我也将它添加到所有头文件中后续请求.要检查令牌的到期并通过创建请求刷新我使用https://github.com/auth0/angular-jwt

我在应用程序的配置中添加了令牌刷新代码,但是当我在这里做任何其他请求时,我从未调用此方法是我尝试过的代码.

app.config(function Config($httpProvider, jwtInterceptorProvider) {


  jwtInterceptorProvider.tokenGetter = function(jwtHelper, $http,$localStorage) {

    if ($localStorage.currentUser) {
    var token = $localStorage.currentUser.token;
    if (jwtHelper.isTokenExpired(token)) {

      return $http({
        url: 'http://backend.mywebsite.com/token',
        method: 'GET'
      }).then(function(response) {
        var token = response.token;
      $localStorage.currentUser.token = token;
      $http.defaults.headers.common.Authorization = 'Bearer ' +   $localStorage.currentUser.token;
        return token;
      });
    } else {
      return token;
    }
  }
}
$httpProvider.interceptors.push('jwtInterceptor');
});

我想知道如何配置此功能,以便每当令牌过期时,它会自动刷新并设置在http标头中？

Answer 1

你应该考虑的要点

1. 您不应更改tokenGetter函数内的默认标头.
2. 如果您的令牌已过期,则无法调用令牌端点.

您有两个选项,您可以使用刷新令牌并向委派端点发出请求,该委托端点使用刷新令牌来获取新的(未过期的)令牌.

要么

您可以使用委派端点更新JWT,并在令牌过期之前请求新的访问令牌.如果令牌已过期并且没有refresh_token,则您无法真正做任何事情.

一刷新令牌是一种特殊的JWT中所使用没有他们需要重新进行身份验证来验证用户.它携带获取新访问令牌所需的信息.

换句话说,每当访问令牌需要访问特定资源时,客户端可以使用刷新令牌来获得由认证服务器发布的新访问令牌.像您这样的常见用例包括在旧的访问令牌过期后获取新访问令牌,或者首次访问新资源.刷新令牌也可以过期但是相当长寿.

可以在下面找到使用刷新令牌在令牌过期后获取新令牌的示例代码示例:

angular.module('app', ['angular-jwt'])
    .config(function Config($httpProvider, jwtInterceptorProvider) {
        jwtInterceptorProvider.tokenGetter = function(jwtHelper, $http) {
            var jwt = localStorage.getItem('JWT');
            var refreshToken = localStorage.getItem('refresh_token');

            if (jwtHelper.isTokenExpired(jwt)) {
                // This is a promise of a JWT id_token
                return $http({
                    url: '/delegation',
                    // This will not send the JWT for this call
                    skipAuthorization: true,
                    method: 'POST',
                    refresh_token : refreshToken
                }).then(function(response) {
                    localStorage.setItem('JWT', response.data.jwt);
                    return jwt;
                });
            } else {
                return jwt;
            }
        }
        $httpProvider.interceptors.push('jwtInterceptor');
    })

如果您想了解有关刷新令牌及其工作方式的更多信息,可以查看此文章.