axios refreshtoken 重新发起请求

原创

mob64ca12d70c79 2024-05-24 03:39:54 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d70c79的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用axios实现token刷新并重新发起请求

引言

在前后端分离的项目中，前端通常会使用axios来进行网络请求。在一些需要用户登录的场景下，服务端会返回一个access token用于验证用户身份。然而，access token有时效性，会在一段时间后过期，需要刷新token。本文将介绍如何通过axios实现token刷新并重新发起请求的功能。

什么是token刷新

Token刷新是指在token过期后，通过提供refresh token获取新的access token的过程。refresh token通常比access token的有效期更长，用于更新access token而无需用户重新登录。

使用axios实现token刷新

下面是一个示例的axios请求代码，其中使用了axios拦截器来实现token刷新的功能。

// 创建axios实例
const axiosInstance = axios.create({
  baseURL: '
  timeout: 5000
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const accessToken = localStorage.getItem('accessToken');
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    return response;
  },
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = localStorage.getItem('refreshToken');
      try {
        const response = await axios.post('/refresh', { token: refreshToken });
        const newAccessToken = response.data.accessToken;
        localStorage.setItem('accessToken', newAccessToken);
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return axios(originalRequest);
      } catch (error) {
        return Promise.reject(error);
      }
    }
    return Promise.reject(error);
  }
);

在上面的代码中，我们通过请求拦截器和响应拦截器实现了token刷新的功能。当服务器返回401未授权错误时，我们会尝试使用refresh token来获取新的access token，并重新发起原始请求。

类图示例

下面是一个使用mermaid语法表示的axios请求类图示例：

classDiagram
    class Axios {
        <<axios>> +create(config)
    }
    class Interceptors {
        <<interceptor>> +request
        <<interceptor>> +response
    }
    class Request {
        <<request>> +url
        <<request>> +headers
    }
    class Response {
        <<response>> +status
        <<response>> +data
    }
    class Token {
        <<token>> +accessToken
        <<token>> +refreshToken
    }
    Axios --|> Interceptors
    Interceptors --|> Request
    Interceptors --|> Response
    Axios --> Token

以上是使用mermaid语法表示的axios请求类图示例，展示了axios、拦截器、请求、响应和token之间的关系。