vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息
之前的一個(gè)上線(xiàn)半年多的項(xiàng)目，客戶(hù)提出一點(diǎn)小需求改動(dòng)，當(dāng)跑項(xiàng)目時(shí)發(fā)現(xiàn)線(xiàn)上沒(méi)有問(wèn)題，線(xiàn)下登錄成功，自動(dòng)跳轉(zhuǎn)后驗(yàn)證登錄人信息時(shí)驗(yàn)證失敗，無(wú)登錄信息導(dǎo)致頁(yè)面一直停留在登錄頁(yè)
登錄請(qǐng)求成功
隨后跳轉(zhuǎn)頁(yè)面后調(diào)取當(dāng)前登錄人信息無(wú)效，跳回登錄頁(yè)重新登錄
導(dǎo)致頁(yè)面一直停留在登錄頁(yè)。
問(wèn)題原因
線(xiàn)下測(cè)試環(huán)境地址可能存在跨域問(wèn)題，但是不會(huì)報(bào)跨域錯(cuò)誤，部分接口可以訪問(wèn)，但訪問(wèn)后的接口數(shù)據(jù)得不到認(rèn)可。
common.js原地址寫(xiě)法
root() {
return o.isDev() ? "https://www.baidu.com/api/admin/" :
"https://www.baidu.com/api/admin/";
},
改為
root() {
return "/api/admin/";
},
同時(shí)vue.config.js加代碼如下
const devServerBaseUrl = "https://www.baidu.com"
module.exports = {
devServer: {
// 在devServer里加下面代碼
proxy: {
'/api/*': {
target: devServerBaseUrl,
pathRewrite: {
'^/api': '/api'
}
},
}
// 加以上代碼，其他需要的配置這里刪除了，其他配置需要的自行添加
},
}
這樣就可以避免接口地址正確，但是存在跨域不報(bào)錯(cuò)的問(wèn)題，如上操作是公司大佬傳授的
vue項(xiàng)目登錄處理token令牌問(wèn)題
1、在點(diǎn)擊登錄按鈕后，后臺(tái)會(huì)返回一個(gè)token
2、將得到的token先儲(chǔ)存在sessionStorage中，window.sessionStorage.setItem('token',token)
3、然后就可以在請(qǐng)求攔截器中獲取到存儲(chǔ)的token
//axios請(qǐng)求攔截器
? ? instance.interceptors.request.use(config => {
? ? ? //在此處攜帶token,將token放在請(qǐng)求頭中，傳給后臺(tái)
? ? ? if(window.sessionStorage.getItem('token')) {
? ? ? ? config.headers['Authorization'] = window.sessionStorage.getItem(token)
? ? ? }
? ? ? return config;
? ? }, err => {
? ? ? console.log(err);
? ? })總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue項(xiàng)目中使用百度地圖的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06
IE11下處理Promise及Vue的單項(xiàng)數(shù)據(jù)流問(wèn)題
最近我開(kāi)發(fā)的公司的競(jìng)賽網(wǎng)站被發(fā)現(xiàn)在IE11下排行榜無(wú)數(shù)據(jù)，但是在其他瀏覽器沒(méi)問(wèn)題，我然后打開(kāi)控制臺(tái)一看，發(fā)現(xiàn)有問(wèn)題，糾結(jié)了半天才搗騰好，下面小編把方案分享處理，供大家選擇2019-07-07
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問(wèn)題
這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue-cli-service serve報(bào)錯(cuò)error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報(bào)錯(cuò)error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue各種時(shí)間類(lèi)型轉(zhuǎn)換方法例子
前端前后端接?處理時(shí)經(jīng)常會(huì)遇到需要轉(zhuǎn)換不同時(shí)間格式的情況,下面這篇文章主要給大家介紹了關(guān)于vue各種時(shí)間類(lèi)型轉(zhuǎn)換的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于Vue中常用的鼠標(biāo)移入移出事件的相關(guān)資料,鼠標(biāo)移入移出事件在 Vue 中可以通過(guò)@mouseenter和@mouseleave來(lái)綁定,需要的朋友可以參考下2023-07-07