vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息
之前的一個(gè)上線半年多的項(xiàng)目，客戶提出一點(diǎn)小需求改動(dòng)，當(dāng)跑項(xiàng)目時(shí)發(fā)現(xiàn)線上沒(méi)有問(wè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)題原因
線下測(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 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
這篇文章主要介紹了vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))，本文通過(guò)實(shí)例代碼給大家介紹的詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案,關(guān)于這個(gè)問(wèn)題,通常是由于插件名稱(chēng)輸入錯(cuò)誤、網(wǎng)絡(luò)問(wèn)題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了vuex操作state對(duì)象的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
vue使用webSocket更新實(shí)時(shí)天氣的方法
本文將結(jié)合實(shí)例代碼，介紹vue使用webSocket更新實(shí)時(shí)天氣的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue中使用elementui實(shí)現(xiàn)樹(shù)組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實(shí)現(xiàn)對(duì)樹(shù)組件tree右鍵增刪改功能,右擊節(jié)點(diǎn)可進(jìn)行增刪改，對(duì)節(jié)點(diǎn)數(shù)據(jù)進(jìn)行模糊查詢(xún)功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
Axios是在前端開(kāi)發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫(kù)，用過(guò)的都知道,篇文章主要給大家介紹了關(guān)于vue的相關(guān)資料,需要的朋友可以參考下2021-10-10
el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容
這篇文章主要給大家介紹了關(guān)于el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗(yàn)證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下2023-10-10
vue粘貼復(fù)制功能的實(shí)現(xiàn)過(guò)程記錄
最近在項(xiàng)目中遇到點(diǎn)擊按鈕復(fù)制鏈接功能,所以這篇文章主要給大家介紹了關(guān)于vue粘貼復(fù)制功能的實(shí)現(xiàn)過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列具體代碼
最近遇到一個(gè)動(dòng)態(tài)增加行和列的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue?el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的相關(guān)資料,需要的朋友可以參考下2023-09-09