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