vue3axiosjwt拦截器

实现Vue3 axios jwt拦截器

介绍

在Vue3项目中使用axios进行网络请求时，我们经常需要在每次请求中添加JWT令牌（JSON Web Token）以进行身份验证。为了简化这个过程，我们可以使用axios的拦截器来实现自动添加JWT令牌的功能。本文将指导你如何使用Vue3、axios和JWT来实现拦截器。

整体流程

下面是实现拦截器的整体流程：

接下来，我们将详细介绍每一步所需的代码和说明。

步骤

1. 创建Vue3项目

首先，你需要创建一个Vue3项目。你可以使用Vue CLI来创建项目，运行以下命令：

vue create vue3-axios-jwt-interceptor

根据提示选择你需要的配置。

2. 安装axios和jsonwebtoken库

进入项目目录，运行以下命令来安装axios和jsonwebtoken库：

cd vue3-axios-jwt-interceptor
npm install axios jsonwebtoken --save

3. 创建axios实例

打开src/main.js文件，添加以下代码来创建一个axios实例：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios.create({
  baseURL: ' // 设置API的基础URL
  headers: {
    'Content-Type': 'application/json'
  }
})
app.mount('#app')

这里我们使用Vue的全局属性来创建一个axios实例，并设置了API的基础URL和请求头。

4. 添加请求拦截器

在src/main.js文件中，继续添加以下代码来添加请求拦截器：

app.config.globalProperties.$axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('jwt_token') // 获取存储在本地的JWT令牌
    if (token) {
      config.headers.Authorization = `Bearer ${token}` // 将JWT令牌添加到请求头中
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

这段代码将在每个请求被发送之前执行。它首先从本地存储中获取JWT令牌，然后将令牌添加到请求头的Authorization字段中。

5. 添加响应拦截器

在src/main.js文件中，继续添加以下代码来添加响应拦截器：

app.config.globalProperties.$axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response && error.response.status === 401) {
      // 处理未授权的错误，例如跳转到登录页面
    }
    return Promise.reject(error)
  }
)

这段代码将在每个响应被接收之后执行。它可以用来处理特定的错误状态，例如未授权的错误（401）。你可以在这里添加自定义的错误处理逻辑，例如跳转到登录页面。

6. 使用拦截器发送请求

现在，你可以在Vue组件中使用axios实例来发送带有JWT令牌的请求了。例如，在src/App.vue组件中添加以下代码：

<template>
  <div>
    <button @click="fetchData">发送请求</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$axios.get('/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        })
    }
  }
}
</script>

这段代码在按钮点击事件中发送了一个GET请求到/data。由于我们已经在拦截器中添加了JWT令牌，请求将自动包含该令牌。

到此为止，我们已成功实现了Vue3 axios JWT拦截器。