如何通过axios拦截器,给除了登录请求以外,axios的所有异步请求添加JWT令牌！

在 Vue 项目中配置除了登录请求以外的所有请求的令牌，通常涉及到在请求头中添加令牌（Token）信息。这可以通过使用 Axios 或其他 HTTP 请求库来实现。以下是一般的步骤：

1. **安装 Axios**：

如果你还没有安装 Axios，可以使用以下命令安装它：

   ```bash
   npm install axios
   ```

2. **创建 Axios 实例**：

你可以创建一个全局的 Axios 实例，并在该实例中配置请求拦截器，以在每个请求中添加令牌信息。

   ```javascript
   // main.js 或其他入口文件

import Vue from 'vue'
import App from './App.vue'
import router from "@/router/router"
import element from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
// 在生产环境中禁用警告信息和启用构建优化
Vue.config.productionTip = false// 创建一个 Axios 实例
const axiosInstance = axios.create({baseURL: 'http://localhost:8080/qy', // 通用后端 Url 地址timeout: 5000, // 请求最大等待时间
})// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {// 获取请求的URLconst requestUrl = config.url;// 提取URL路径部分/qy/Login...const urlPath = new URL(requestUrl).pathname;// 在请求头中添加令牌信息const jwtToken = localStorage.getItem('jwtToken') // 从本地存储中获取令牌// 检查是否是登录请求，这里假设登录请求的URL是 '/Login'if (urlPath !== '/qy/Login' && urlPath !== '/qy/LogOut') {console.log(urlPath);// 如果不是登录请求，添加令牌到请求头if (jwtToken) {config.headers.Authorization = `${jwtToken}`}}return config},(error) => {return Promise.reject(error)}
)// 将 Axios 实例添加到 Vue 原型中，以便在组件中使用
// Vue.prototype.axios axios便在组件中使用如：this.$axios
Vue.prototype.axios = axiosInstanceVue.use(element)
new Vue({router,render: h => h(App),
}).$mount('#app')

在上面的代码中，我们创建了一个 Axios 实例 `axiosInstance`，并在请求拦截器中检查本地存储中是否存在令牌，如果存在，则将其添加到请求头中的 `Authorization` 字段中。
   ```

   

3. **在需要发送请求的组件中使用 Axios**：

现在，你可以在组件中使用 `$http` 来发送请求，这将包括令牌信息。

   ```javascript

   // 在组件中发送请求this.$http.get('/api/some-endpoint').then((response) => {// 处理响应}).catch((error) => {// 处理错误})

   ```

4. **登录时设置令牌**：

在用户登录成功后，你需要将令牌保存到本地存储中（或者使用 Vuex 管理），以便在后续请求中使用。

   ```javascript
   // 在登录成功后保存令牌到本地存储
   localStorage.setItem('token', 'your_token_here')
   ```

实际情况可能会因项目的需求而有所不同。还需要确保在用户登录后、注销时、令牌过期时等情况下进行适当的令牌管理和更新。

此外，安全性也是非常重要的，令牌应该以安全的方式传输和存储，并且需要考虑令牌的有效期管理。