Vue 资源拦截器刷新 JWT 令牌

Question

我正在尝试编写一个 vue-resource 拦截器来刷新 JWT 访问令牌，当它过期时。我假设我需要一个请求后回调来检查令牌过期错误（在我的情况下为status == 401），然后调用刷新端点并重试初始请求。

使用下面的代码，我面临的唯一问题是刷新令牌后的next() 调用永远不会发生，即使刷新执行良好并且新令牌保存到localStorage。

Vue.http.interceptors.push(function (request, next) {

    if (!request.headers.has('Authorization') && window.localStorage.access_token) {
        request.headers.set('Authorization', `Bearer ${window.localStorage.access_token}`);
    }

    next(function (response) {
        if (response.status === 401) {
            const refreshToken = localStorage.getItem('refresh_token');

            Vue.http.post('/api/v4/auth/refresh', null, {
                headers: {'Authorization': `Bearer ${refreshToken}`}
            }).then((response) => {
                localStorage.setItem('access_token', response.data.accessToken);
                localStorage.setItem('refresh_token', response.data.refreshToken);
            }).then(() => {
                next();
            });
        }
    });
})

Answer 1

我认为回调的链接不太正确。对 next 的第二次调用应该在第一次调用返回一个 Promise 时发生，并且不应依赖于用于解决第一个 Promise 的逻辑，而仅取决于该 Promise 的成功解决。

Vue.http.interceptors.push(function (request, next) {

  if (!request.headers.has('Authorization') && window.localStorage.access_token) {
    request.headers.set('Authorization', `Bearer ${window.localStorage.access_token}`);
  }

  next(function (response) {
    if (response.status === 401) {
        const refreshToken = localStorage.getItem('refresh_token');

        return Vue.http.post('/api/v4/auth/refresh', null, {
            headers: {'Authorization': `Bearer ${refreshToken}`}
        }).then((response) => {
            localStorage.setItem('access_token', response.data.accessToken);
            localStorage.setItem('refresh_token', response.data.refreshToken);
        })
    }
    return Promise.resolve(response)
  }).then(() => {
     next(); // This is called whenever the first callback returns a promise
  });
})