angularjs - 如何在 angularjs 中使用拦截器刷新 JWT token ？

Question

我在 Lumen 中实现了我的应用程序后端实现，每次用户登录时它都会提供一个 JWT token 。前端我使用 Angular 将 token 保存在本地存储中，并将它添加到所有后续请求中的 header 。 要检查 token 是否过期并通过创建请求进行刷新，我正在使用 https://github.com/auth0/angular-jwt

我在应用程序的配置中添加了 token 刷新代码，但是当我发出任何其他请求时从未调用此方法，这里是我尝试过的代码。

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');
});

我想知道如何配置此功能，以便在 token 过期时自动刷新并在 http header 中设置？

Answer 1

您应该考虑的要点

1. 您不应更改 tokenGetter 函数内的默认 header 。
2. 如果您的 token 已过期，您将无法调用 token 端点。

您有两个选择，您可以使用刷新 token 并向使用刷新 token 的委托(delegate)端点发出发布请求以获取新的(未过期的) token 。

或

您可以使用委托(delegate)端点更新 JWT，并在 token 过期前请求新的访问 token 。如果 token 已过期且没有 refresh_token，则您实际上无能为力。

刷新 token 是一种特殊的 JWT，用于对用户进行身份验证而无需重新进行身份验证。它携带获取新访问 token 所需的信息。

换句话说，每当需要访问 token 来访问特定资源时，客户端可以使用刷新 token 来获取由身份验证服务器颁发的新访问 token 。像您这样的常见用例包括在旧访问 token 过期后获取新访问 token ，或者首次访问新资源。刷新 token 也可以过期，但生命周期相当长。

在 token 过期后使用刷新 token 获取新 token 的示例代码示例如下:

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');
    })

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