如何通过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) => {
    // 获取请求的URL
    const 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 = axiosInstance

Vue.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')
   ```

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

此外，安全性也是非常重要的，令牌应该以安全的方式传输和存储，并且需要考虑令牌的有效期管理。文章来源地址https://uudwc.com/A/xGpAR