axios无痛刷新token

axios是一个流行的JavaScript库，用于浏览器和Node.js环境下的HTTP请求。当涉及到服务器端认证，如使用JSON Web Tokens (JWT)时，token可能会有过期时间。为了保持用户会话，你需要在每次请求头中附带刷新后的token。在axios中无痛刷新token通常涉及以下步骤：

1. **配置axios实例**：
首先，在你的应用初始化阶段，创建一个axios实例，并添加一个拦截器来处理请求头。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'your-api-url',
  headers: {
    Authorization: 'Bearer your_initial_token'
  },
  // 添加一个全局拦截器
  interceptors: {
    request: async (config) => {
      const token = localStorage.getItem('refreshToken');
      if (token && !config.headers.Authorization) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    }
  }
});

2. **刷新令牌逻辑**：
当token即将过期（可以根据JWT设置的`exp`字段判断），你可以在拦截器里检查这个状态，并发送一个新的刷新请求来获取新的token。

instance.interceptors.request.use(async (config, next) => {
  const token = await refreshToken(); // 模拟刷新函数
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
    localStorage.setItem('refreshToken', token);
  }
  return next(config);
}, (error) => Promise.reject(error));

3. **刷新令牌函数**：
实现一个函数`refreshToken()`，它从服务器获取新的token，并将其存储起来。通常这会涉及到发送一个带有旧token的POST请求到指定的刷新URL。

async function refreshToken() {
  try {
    const response = await axios.post('/api/token/refresh', { oldToken: localStorage.getItem('refreshToken') });
    return response.data.newToken;
  } catch (error) {
    console.error('Failed to refresh token:', error);
    throw new Error('Unable to refresh token');
  }
}