Axios 拦截器响应令牌刷新 API 已调用,但无论在 refreshToken API 和所有 API 中,获取令牌均已过期

IT技术 reactjs axios interceptor refresh-token
2021-04-04 21:16:43

我的 axios 拦截器是:-

axios.interceptors.response.use((response, error) => {
  const originalRequest = response.config;

  if (response.data.status === 'Token is Expired' && originalRequest.url === '/api/refresh') {
    this.props.history.push('/logout');
    Promise.reject(error);
  }

  if (response.data.status === 'Token is Expired' && !originalRequest._retry) {
    originalRequest._retry = true;
    const playerToken = localStorage.getItem('accessToken');
    return axios
      .get('/api/refresh', {
        headers: {
          Authorization: `bearer ${playerToken}`,
        },
      })
      .then(res => {
        console.log('from refreshtoken', res);
        const stringRes = JSON.stringify(res);
        const parsedRes = JSON.parse(stringRes);
        const stringData = JSON.stringify(parsedRes.data);
        const parsedData = JSON.parse(stringData);
        const stringToken = JSON.stringify(parsedData.data);
        const parsedToken = JSON.parse(stringToken);

        if (parsedData.success == true) {
          localStorage.setItem('accessToken', playerToken);
          axios.response.config.headers['Authorization'] = `bearer ${parsedToken}`;
          return Promise.resolve();

          return axios(originalRequest);
        } else {
          this.props.history.push('/logout');
        }
      })
      .catch(err => {
        console.log('from refreshtoken', err);
      });
  }

  return Promise.reject(error);
});

我的代码正在运行,但是当我第一次调用刷新令牌 API 时,它也会返回相同的状态“令牌已过期”,因此我已退出应用程序。这仅发生在拦截器中。当我在拦截器之外调用 Refresh API 时,它会返回一个刷新令牌。

我的代码有错误吗?或者完全是其他一些编码错误。请回答并告诉我正确的方法以及我将拦截器放在哪里?目前它被放置在一个在登录后被调用的组件中。

1个回答

通常流程应该是这样的:

  1. 定期提出请求 accessToken
  2. 请求失败,状态码为 401
  3. axios 拦截器捕获它并向token/refresh. 从该响应中,它会获得一个新的访问令牌。
  4. 重试原始请求。

所以代码应该是这样的(这是我的应用程序的一个工作示例):

function isUnAuthorizedError(error) {
  return error.config && error.response && error.response.status === 401;
}

function shouldRetry(config) {
  return config.retries.count < 3;
}

function updateAuthToken(response) {
  localStorage.setItem('token', response.data.accessToken);
}

async function authInterceptor(error) {
  error.config.retries = error.config.retries || {
    count: 0,
  };

  if (isUnAuthorizedError(error) && shouldRetry(error.config)) {
    const response = await axios.post(`/token/refresh`, {});

    updateAuthToken(response);

    error.config.retries.count += 1;
    axios.defaults.headers.common.Authorization = `Bearer ${response.data.accessToken}`; // update the accessToken
    return axios.rawRequest(error.config); // retries the original request
  }
  return Promise.reject(error);
}

axios.interceptors.response.use(null, authInterceptor); // This indicates that authInterceptor will work only on request errors (status code >= 400)

希望这个流程更有意义。

谢谢你。我已经做到了。还是得到了同样的回应。
2021-05-24 21:16:43
正确,每次页面刷新都应该配置拦截器。您可以创建一个文件,在其中创建 axios 的新实例并导出该实例。您的所有应用程序都将直接使用此实例而不是 lib。在那里你可以配置你的拦截器和 api 的基本 URL 等等......
2021-05-25 21:16:43
谢谢。我已经理解你的代码了。我试过做同样的事情。将尝试以这种方式实施。让我看看我会得到什么回应。
2021-05-28 21:16:43
问题基本上来自后端关于刷新令牌到期。谢谢您的帮助。
2021-06-11 21:16:43
另外你能告诉我你把这段代码放在你的应用程序的什么地方吗?我是 axios 拦截器的新手,从我目前收集到的信息来看,您必须在您的应用程序中调用它们一次,它将在整个应用程序中工作。但是一旦我刷新页面,我的拦截器就会停止工作?
2021-06-17 21:16:43