vue+axios全局添加請求頭和參數(shù)操作
更新時間：2020年07月24日 11:31:35 作者：竹葉輕拂水
這篇文章主要介紹了vue+axios全局添加請求頭和參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
走登錄的接口都會返回一個token值，然后存起來方便之后調(diào)接口的時候給后臺傳過去，傳給后臺的方式有兩種：（具體使用哪種需要和后臺商量）
1、放在請求頭中
2、放在接口的參數(shù)中
1、放在請求頭中
下面代碼是從本地cookie中拿token
VueCookie：一個用于處理瀏覽器cookies的簡單Vue.js插件.
// 在封裝axios的文件中添加攔截器
// 添加請求攔截器，在請求頭中加token
service.interceptors.request.use(
config => {
// 判斷本地的cookie中是否有token
if (VueCookie.isKey('token')) {
config.headers.Authorization = VueCookie.get('token')
} else {
// 跳轉(zhuǎn)到登錄頁面(這里使用router，是因為路由文件引入到了此文件里)
router.push('/login')
}
return config
},
error => {
return Promise.reject(error)
})
這個時候雖然在請求頭中放了token，但是后臺并拿不到token的值，我們需要在創(chuàng)建axios對象的時候允許請求攜帶cokie，也可以加到main.js全局里面。
// 放在請求文件中
const service = axios.create({
baseURL: "http://XXXXXXXXX:XXXX",
timeout: 10000,
withCredentials: true // 允許攜帶cookie
});
// 放在全局main.js中 import axios from "axios"; axios.defaults.withCredentials = true; // 允許攜帶cookie
2、放在參數(shù)中
以下代碼是從本地存儲localStorage中拿token
// 添加請求攔截器，在參數(shù)中加token
service.interceptors.request.use(
config => {
// 將token添加到每一個接口的參數(shù)中
// 判斷請求的類型：如果是post請求就把默認(rèn)參數(shù)拼到data里面；如果是get請求就拼到params里面
const token = localStorage.getItem('ISTOKEN')
if (localStorage.getItem('ISTOKEN')) {
// 注意：config.method 的判斷值必須是小寫的post和get
if (config.method === 'post') {
config.data = {
api_token: token,
...config.data
}
} else if (config.method === 'get') {
config.params = {
api_token: token,
...config.params
}
}
} else {
// 跳轉(zhuǎn)到登錄頁面(這里使用router，是因為路由文件引入到了此文件里)
router.push('/login')
}
return config
},
error => {
return Promise.reject(error)
})
補充知識：Vue，POST請求頭'Content-Type':'application/json;'，data上傳方法
如下所示：
transformRequest 方法說明axios中文文檔
以上這篇vue+axios全局添加請求頭和參數(shù)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了vue組件中使用iframe元素的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue 無法覆蓋vant的UI組件的樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue獲取時間戳轉(zhuǎn)換為日期格式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要給大家介紹了關(guān)于vue3.0路由自動導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過下標(biāo)修改數(shù)組,但頁面不會自動更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細(xì)介紹了如何基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
Vue?element實現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解
目前本人再使用vue-element-admin項目時都是通過直接刪除一些用不上的路由來進(jìn)行側(cè)邊欄的清除，但是其實有一個更加好的辦法來對項目的側(cè)邊欄顯示的內(nèi)用進(jìn)行管理，就是權(quán)限管理，其實也不知道這個方法好不好，原理上來說時跟直接刪除該路由的方式時一樣的2022-08-08
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10