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


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

    1. **安装 Axios**:

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

       ```bash
       npm install axios
       ```

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

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

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

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from "@/router/router"
    4. import element from 'element-ui';
    5. import axios from 'axios'
    6. import 'element-ui/lib/theme-chalk/index.css';
    7. // 在生产环境中禁用警告信息和启用构建优化
    8. Vue.config.productionTip = false
    9. // 创建一个 Axios 实例
    10. const axiosInstance = axios.create({
    11. baseURL: 'http://localhost:8080/qy', // 通用后端 Url 地址
    12. timeout: 5000, // 请求最大等待时间
    13. })
    14. // 添加请求拦截器
    15. axiosInstance.interceptors.request.use(
    16. (config) => {
    17. // 获取请求的URL
    18. const requestUrl = config.url;
    19. // 提取URL路径部分/qy/Login...
    20. const urlPath = new URL(requestUrl).pathname;
    21. // 在请求头中添加令牌信息
    22. const jwtToken = localStorage.getItem('jwtToken') // 从本地存储中获取令牌
    23. // 检查是否是登录请求,这里假设登录请求的URL是 '/Login'
    24. if (urlPath !== '/qy/Login' && urlPath !== '/qy/LogOut') {
    25. console.log(urlPath);
    26. // 如果不是登录请求,添加令牌到请求头
    27. if (jwtToken) {
    28. config.headers.Authorization = `${jwtToken}`
    29. }
    30. }
    31. return config
    32. },
    33. (error) => {
    34. return Promise.reject(error)
    35. }
    36. )
    37. // 将 Axios 实例添加到 Vue 原型中,以便在组件中使用
    38. // Vue.prototype.axios axios便在组件中使用如:this.$axios
    39. Vue.prototype.axios = axiosInstance
    40. Vue.use(element)
    41. new Vue({
    42. router,
    43. render: h => h(App),
    44. }).$mount('#app')

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

       

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

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

       ```javascript

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


       ```

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

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

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

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

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

  • 相关阅读:
    嵌入式和 Java 走哪条路?
    硬件系统工程师宝典(44)-----差分信号走线“相位失配”怎么破?
    52、基于函数式方式开发 Spring WebFlux 应用
    《算法系列》之树
    Word文件不能编辑是什么原因?
    vue中request.js中axios请求和(若依)文件通用下载方法封装
    Spring-bean
    MySQL笔记——索引
    windows设置自启动服务使用winsw
    图神经网络(GNN)综述的总结
  • 原文地址:https://blog.csdn.net/qq_58647634/article/details/133151426