02 . 处理axios的三个问题：设置基路径/axios挂载到vue原型/请求时自动携带token...

最新推荐文章于 2025-02-13 10:54:01 发布

你狗

最新推荐文章于 2025-02-13 10:54:01 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sikongdada/p/10688815.html

本文介绍如何在Vue项目中配置Axios库，包括设置基路径、将Axios挂载到Vue原型上以及如何自动携带Token进行身份验证。通过使用axios.interceptors.request，每次请求都会自动从localStorage中获取Token并添加到请求头中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1  //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌
 2 import axios from 'axios'
 3 // 处理axios的三个问题
 4 // 处理一:基路径
 5 axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'
 6 // 处理二 : 把axios 挂载到 vue 的原型上 ,就不用每次都引入啦
 7 Vue.prototype.$axios = axios
 8 // 处理三: 自动携带token
 9 // axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
10 axios.interceptors.request.use(
11   function (config) {
12     // 拦截每次请求,携带token
13     config.headers.Authorization = localStorage.getItem('token')
14 
15     return config
16   },
17   function (error) {
18     // Do something with request error
19     return Promise.reject(error)
20   }
21 )