axios token过期重新请求

引言

在前后端分离的开发模式中，前端需要向后端发送请求获取数据。为了保证数据的安全性，后端通常会要求前端在每次请求时附带一个有效的token。token是一种身份验证方式，它可以帮助后端确认请求来自于合法的用户。

然而，token是有过期时间的，一旦过期，就需要重新获取一个有效的token来继续操作。在前端开发中，使用axios是一种常见的发送HTTP请求的库。本文将介绍如何使用axios在token过期时自动重新请求并更新token。

axios简介

axios是一个基于Promise的HTTP请求库，可以在浏览器和Node.js中使用。它支持请求拦截器和响应拦截器，可以在请求发送前和响应返回后进行一些处理。

axios的基本用法如下：

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

token过期重新请求流程

当token过期时，我们需要重新请求一个有效的token，并将其添加到每次请求的请求头中。下面是一个基本的流程图来说明这个过程：

flowchart TD
  A[发送请求] --> B{是否有token}
  B --> |有token| C[添加token到请求头]
  B --> |没有token| D[重新请求token]
  D --> C
  C --> E[发送带有token的请求]
  E --> F[处理响应]

实现

为了实现token过期重新请求的功能，我们需要使用axios的请求拦截器和响应拦截器。

首先，我们需要在请求拦截器中判断是否有有效的token。如果有，我们将其添加到请求头中；如果没有，我们将向后端重新请求一个有效的token，并将其保存起来。

import axios from 'axios';

let token = null;

axios.interceptors.request.use(config => {
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    return axios.post('/api/token')
      .then(response => {
        token = response.data.token;
        error.config.headers.Authorization = `Bearer ${token}`;
        return axios.request(error.config);
      })
      .catch(error => {
        return Promise.reject(error);
      });
  }
  return Promise.reject(error);
});

在上述代码中，我们首先定义了一个变量token来保存有效的token。在请求拦截器中，我们判断token是否存在，如果存在则将其添加到请求头中；在响应拦截器中，如果返回的响应状态是401（即token过期），我们将重新请求一个有效的token，并将其添加到请求头中。

这样，当我们发送请求时，axios会自动处理token过期的情况，并重新发送带有有效token的请求。

状态图

下面是一个使用mermaid语法绘制的状态图，表示token和请求的状态变化：

stateDiagram
  [*] --> NoToken
  NoToken --> HasToken
  HasToken --> [*]
  HasToken --> TokenExpired
  TokenExpired --> HasToken

结论

通过使用axios的拦截器，我们可以方便地实现token过期重新请求的功能。这样，我们就可以在前端开发中很好地处理token过期的情况，并且保证用户的操作不会因为token过期而中断。

希望本文对你理解axios token过期重新请求的流程有所帮助！