VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
我就廢話(huà)不多說(shuō)了,大家還是直接看代碼吧~
const httpServer = (opts, data) => { const token = localStorage.getItem('token') const PUBLIC = `?token=${token}` let httpDefaultOpts = '' var host = `${process.env.HOST}` var prot = `${process.env.PORT}` var base = host +(prot?":"+prot:"") if (opts.method === 'post') { httpDefaultOpts = { method: opts.method, url: `${base}${opts.url}${PUBLIC}`, headers:{ 'Content-Type':'application/text/html;charset=utf-8' //改這里就好了 }, data: data } } else { httpDefaultOpts = opts } return new Promise(function (resolve, reject) { Axios(httpDefaultOpts).then( (res) => { successState(res) resolve(res) } ).catch( (err) => { errorState(err) reject(err) } ) }) }
補(bǔ)充知識(shí):Vue獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息并給每次請(qǐng)求添加上token
由于后臺(tái)是用jwt的token進(jìn)行身份權(quán)限驗(yàn)證,后臺(tái)在登錄后把token添加響應(yīng)頭里,所以前臺(tái)需要把這個(gè)token存放起來(lái),并給每次請(qǐng)求的請(qǐng)求頭添加上token,服務(wù)器才能獲取token進(jìn)行身份認(rèn)證。
前臺(tái)使用vue項(xiàng)目:
loging.vue(登錄組件)
{ submitForm(formName) { this.$axios .post('/api/admin/login', { userName: this.ruleForm.userName, password: this.ruleForm.password }) .then(successResponse => { this.responseResult = JSON.stringify(successResponse.data) this.msg = JSON.stringify(successResponse.data.msg) if (successResponse.data.code === 200) { this.msg=''; localStorage.setItem('userName',this.ruleForm.userName); //獲取并存儲(chǔ)服務(wù)器返回的AuthorizationToken信息 var authorization=successResponse.headers['authorization']; localStorage.setItem('authorization',authorization); //登錄成功跳轉(zhuǎn)頁(yè)面 this.$router.push('/dashboard'); } }) .catch(failResponse => {}) } }
main.js(全局配置js):
//自動(dòng)給同一個(gè)vue項(xiàng)目的所有請(qǐng)求添加請(qǐng)求頭 axios.interceptors.request.use(function (config) { let token = localStorage.getItem('authorization'); if (token) { config.headers['Authorization'] = token; } return config; })
這里還需要考慮token過(guò)期失效的問(wèn)題,博主將會(huì)在后續(xù)另寫(xiě)博客補(bǔ)充。
以上這篇VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue計(jì)算屬性想要傳入?yún)?shù)如何解決
這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01Vue登錄功能實(shí)現(xiàn)全套詳解(含封裝axios)
登錄功能對(duì)于前端剛?cè)腴T(mén)不久的同學(xué)來(lái)說(shuō)較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實(shí)現(xiàn)(含封裝axios)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12vue 項(xiàng)目接口管理的實(shí)現(xiàn)
在vue開(kāi)發(fā)中,會(huì)涉及到很多接口的處理,當(dāng)項(xiàng)目足夠大時(shí),就需要定義規(guī)范統(tǒng)一的接口,本文就來(lái)介紹一下vue 項(xiàng)目接口管理,具有一定的參考價(jià)值,感興趣的小伙伴可以一起來(lái)了解一下2019-01-01去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)
我們?cè)谑褂胿ue 腳手架時(shí),為了規(guī)范團(tuán)隊(duì)的代碼格式,會(huì)有一個(gè)代碼規(guī)范檢測(cè),如果不符合規(guī)范就會(huì)報(bào)錯(cuò),有時(shí)候我們不想按照他的規(guī)范去寫(xiě)。這時(shí)我們需要關(guān)閉,這里腳本之家小編給大家?guī)?lái)了去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證),一起看看吧2018-03-03vue 根據(jù)數(shù)組中某一項(xiàng)的值進(jìn)行排序的方法
這篇文章主要介紹了vue 根據(jù)數(shù)組中某一項(xiàng)的值進(jìn)行排序的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08