自动刷新访问令牌

Question

对于我的网站，我通过 microsoft 添加了一个简单的授权页面（使用 @azure/msal-react 库）。您可以在链接https://codesandbox.io/s/wizardly-williams-j4bo42查看演示版本

注册成功后，用户将被重定向到该网站。

我对这份工作很满意。但问题是授权期间收到的访问令牌仅存在一小时。告诉我如何才能自动更新访问令牌。

Answer 1

在我们最新的 React 应用程序之一中，我们使用了一个AxiosInterceptor组件，该组件旨在处理 HTTP 响应错误，并在出现 403 未经授权错误时自动尝试令牌刷新。

当 axios 请求收到响应时，拦截器会检查是否有错误。如果没有错误，它只是返回响应。

如果错误代码存在并且原始请求不是针对端点的/auth/login，则它会检查响应状态是否为 403 未经授权以及是否尚未重试该请求。

在 403 的情况下，如果原始请求的 Authorization 标头等于存储的访问令牌，则会将 Authorization 标头设置为存储的刷新令牌，并尝试使用 refreshTokenServices 函数刷新令牌。

如果令牌刷新失败，或者原始请求的 Authorization 标头不等于存储的访问令牌，则会将用户重定向到登录页面并显示错误消息。

代码看起来像这样：

// Response interceptor for API calls
axiosApiInstance.interceptors.response.use((response) => {
  return response
}, async function (error) {
  const originalRequest = error.config;
  if (error.response.status === 403 && !originalRequest._retry) {
    originalRequest._retry = true;
    const access_token = await refreshAccessToken();            
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
    return axiosApiInstance(originalRequest);
  }
  return Promise.reject(error);
});

这是一篇关于此的很棒的文章：

https://thedutchlab.com/blog/using-axios-interceptors-for-refreshing-your-api-token