Vue中Axios添加拦截器刷新token的实现攻略：一次学个够！

前端

2023-08-19 19:50:45

在 Vue.js 中使用 Axios 拦截器刷新 token 的终极指南

摘要

本文将深入探讨如何在 Vue.js 中使用 Axios 拦截器实现刷新 token 的功能。通过添加拦截器，我们可以轻松地拦截和修改请求和响应，从而在我们的应用程序中实现更强大的身份验证机制。

什么是 Axios 拦截器？

Axios 拦截器是一种强大的机制，允许我们在请求被发送或响应被接收之前或之后对其进行修改或处理。拦截器可以用于各种目的，例如添加请求头、日志记录、错误处理和刷新 token。

创建 Axios 实例

在 Vue.js 应用程序中，我们需要创建一个 Axios 实例来进行网络请求。通常，我们会在 main.js 文件中创建这个实例，如下所示：

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000
})

export default axiosInstance

添加拦截器

一旦我们有了 Axios 实例，就可以添加拦截器了。我们可以分别在请求和响应拦截器中添加它们。请求拦截器用于在请求被发送之前对其进行修改或处理，而响应拦截器则用于在响应被接收后对其进行修改或处理。

实现刷新 token

现在，我们可以添加一个请求拦截器来实现刷新 token 的功能：

axiosInstance.interceptors.request.use(config => {
  if (需要刷新token) {
    // 在这里写刷新 token 的逻辑
  }

  return config
}, error => {
  // 处理错误
})

在上面的代码中，我们需要根据需要实现刷新 token 的逻辑。这可能涉及向服务器发送请求来获取新 token。

拦截响应

在响应拦截器中，我们可以进一步处理刷新 token 的响应：

axiosInstance.interceptors.response.use(response => {
  if (响应中有刷新token) {
    // 在这里写处理刷新 token 的逻辑
  }

  return response
}, error => {
  // 处理错误
})

注意事项