45

我正在我的网络应用程序中实现令牌身份验证。我的access token每 N 分钟过期一次，然后 arefresh token用于登录并获取新的access token.

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

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调用。但问题是该块发生的时间晚于拦截器中的 ，因此重试发生在旧的过期凭据上。setAccessToken()thenthengetAccessToken()

getAccessToken()并getRefreshToken()简单地返回存储在浏览器中的现有令牌（它们管理 localStorage、cookie 等）。

在承诺返回之前，我将如何确保语句不会执行？

（这里是github上对应的issue：https ://github.com/mzabriskie/axios/issues/266 ）

4

2 回答 2

32

只需使用另一个承诺：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

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

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

于 2016-03-18T16:06:49.810 回答
11

可以在请求而不是响应中执行此操作，并且它可能会更干净，因为它可以避免在访问令牌过期时访问服务器。从这篇文章中复制：

function issueToken() {
  return new Promise((resolve, reject) => {
    return client({
      ...
    }).then((response) => {
      resolve(response);
    }).catch((err) => {
      reject(err);
    });
  });
}

client.interceptors.request.use((config) => {
  let originalRequest = config;
  if (tokenIsExpired && path_is_not_login) {
    return issueToken().then((token) => {
      originalRequest['Authorization'] = 'Bearer ' + token;
      return Promise.resolve(originalRequest);
    });
  }
  return config;
}, (err) => {
  return Promise.reject(err);
});

于 2018-04-12T02:16:22.850 回答