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

您应该考虑的要点

您不应该更改tokenGetter函数中的默认标头。
如果您的令牌已过期，则无法调用令牌端点。

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

OR

您可以使用委派端点更新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');
    })

如果您想了解有关刷新令牌的更多信息及其工作原理，可以查看此article。

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

1 个答案: