Axios拦截器和异步登录 [英] Axios interceptors and asynchronous login

问题描述

我正在Web应用程序中实现令牌认证.我的access token每N分钟过期一次，然后用refresh token登录并获取新的access token.

I'm implementing token authentication in my web app. My access token expires every N minutes and than a refresh token is used to log in and get a new access token.

我使用Axios进行所有API调用.我设置了一个拦截器来拦截401响应.

I use Axios for all my API calls. I have an interceptor set up to intercept 401 responses.

axios.interceptors.response.use(undefined, function (err) {
  if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
    serviceRefreshLogin(
      getRefreshToken(),
      success => { setTokens(success.access_token, success.refresh_token) },
      error => { console.log('Refresh login error: ', error) }
    )
    err.config.__isRetryRequest = true
    err.config.headers.Authorization = 'Bearer ' + getAccessToken()
    return axios(err.config);
  }
  throw err
})

基本上，当我截获401响应时，我想进行登录，而不是使用新令牌重试原始被拒绝的请求.我的serviceRefreshLogin函数在其then块中调用setAccessToken().但是问题是 then块发生在拦截器中的getAccessToken()以后，因此重试使用旧的过期凭据进行.

Basically, as I intercept a 401 response, I want to do a login and than retry the original rejected request with the new tokens. My serviceRefreshLogin function calls setAccessToken() in its then block. But the problem is that the then block happens later than the getAccessToken() in the interceptor, so the retry happens with the old expired credentials.

getAccessToken()和getRefreshToken()只是返回存储在浏览器中的现有令牌(它们管理localStorage，Cookie等).

getAccessToken() and getRefreshToken() simply return the existing tokens stored in the browser (they manage localStorage, cookies, etc).

我将如何确保在诺言返回之前不执行语句?

How would I go about ensuring statements do not execute until a promise returns?

(以下是github上的相应问题: https://github.com/mzabriskie/axios/Issues/266 )

(Here's a corresponding issue on github: https://github.com/mzabriskie/axios/issues/266)

推荐答案

只需使用另一个诺言:D

Just use another promise :D

axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            serviceRefreshLogin(
                getRefreshToken(),
                success => { 
                        setTokens(success.access_token, success.refresh_token) 
                        err.config.__isRetryRequest = true
                        err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                        axios(err.config).then(resolve, reject);
                },
                error => { 
                    console.log('Refresh login error: ', error);
                    reject(error); 
                }
            );
        }
        throw err;
    });
});

如果您的环境不支持，则承诺使用polyfill，例如 https://github.com/stefanpenner /es6-promise

If your enviroment doesn't suport promises use polyfill, for example https://github.com/stefanpenner/es6-promise

但是，最好重写getRefreshToken以返回Promise，然后使代码更简单

But, it may be better to rewrite getRefreshToken to return promise and then make code simpler

axios.interceptors.response.use(undefined, function (err) {

        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
            return getRefreshToken()
            .then(function (success) {
                setTokens(success.access_token, success.refresh_token) ;                   
                err.config.__isRetryRequest = true;
                err.config.headers.Authorization = 'Bearer ' + getAccessToken();
                return axios(err.config);
            })
            .catch(function (error) {
                console.log('Refresh login error: ', error);
                throw error;
            });
        }
        throw err;
});

演示 https://plnkr.co/edit/0ZLpc8jgKI18w4c0f905?p=preview

这篇关于Axios拦截器和异步登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！