vue+axios全局添加請(qǐng)求頭和參數(shù)操作
走登錄的接口都會(huì)返回一個(gè)token值,然后存起來(lái)方便之后調(diào)接口的時(shí)候給后臺(tái)傳過(guò)去,傳給后臺(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)求的類(lèi)型:如果是post請(qǐng)求就把默認(rèn)參數(shù)拼到data里面;如果是get請(qǐng)求就拼到params里面 const token = localStorage.getItem('ISTOKEN') if (localStorage.getItem('ISTOKEN')) { // 注意:config.method 的判斷值必須是小寫(xiě)的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)文章
vue computed無(wú)法得到this的屬性或方法的解決
這篇文章主要介紹了vue computed無(wú)法得到this的屬性或方法的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue過(guò)濾器filters的用法及時(shí)間戳轉(zhuǎn)換問(wèn)題
Vue的filters過(guò)濾器是比較常見(jiàn)的一個(gè)知識(shí)點(diǎn),下面我將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,感興趣的朋友一起看看吧2021-09-09基于vue-cli3+typescript的tsx開(kāi)發(fā)模板搭建過(guò)程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開(kāi)發(fā)模板,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項(xiàng)目存儲(chǔ)個(gè)人信息的時(shí)候,遇到了頁(yè)面刷新后個(gè)人信息數(shù)據(jù)丟失的問(wèn)題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中,如何實(shí)現(xiàn)此功能呢,下面小編給大家介紹下,感興趣的朋友一起看看吧2019-06-06vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)內(nèi)容,對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12