vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
更新時間：2023年02月23日 16:50:15 作者：kis_me
這篇文章主要介紹了vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息
之前的一個上線半年多的項目，客戶提出一點小需求改動，當跑項目時發(fā)現(xiàn)線上沒有問題，線下登錄成功，自動跳轉(zhuǎn)后驗證登錄人信息時驗證失敗，無登錄信息導(dǎo)致頁面一直停留在登錄頁
登錄請求成功
隨后跳轉(zhuǎn)頁面后調(diào)取當前登錄人信息無效，跳回登錄頁重新登錄
導(dǎo)致頁面一直停留在登錄頁。
問題原因
線下測試環(huán)境地址可能存在跨域問題，但是不會報跨域錯誤，部分接口可以訪問，但訪問后的接口數(shù)據(jù)得不到認可。
common.js原地址寫法
root() {
return o.isDev() ? "https://www.baidu.com/api/admin/" :
"https://www.baidu.com/api/admin/";
},
改為
root() {
return "/api/admin/";
},
同時vue.config.js加代碼如下
const devServerBaseUrl = "https://www.baidu.com"
module.exports = {
devServer: {
// 在devServer里加下面代碼
proxy: {
'/api/*': {
target: devServerBaseUrl,
pathRewrite: {
'^/api': '/api'
}
},
}
// 加以上代碼，其他需要的配置這里刪除了，其他配置需要的自行添加
},
}
這樣就可以避免接口地址正確，但是存在跨域不報錯的問題，如上操作是公司大佬傳授的
vue項目登錄處理token令牌問題
1、在點擊登錄按鈕后，后臺會返回一個token
2、將得到的token先儲存在sessionStorage中，window.sessionStorage.setItem('token',token)
3、然后就可以在請求攔截器中獲取到存儲的token
//axios請求攔截器
? ? instance.interceptors.request.use(config => {
? ? ? //在此處攜帶token,將token放在請求頭中，傳給后臺
? ? ? if(window.sessionStorage.getItem('token')) {
? ? ? ? config.headers['Authorization'] = window.sessionStorage.getItem(token)
? ? ? }
? ? ? return config;
? ? }, err => {
? ? ? console.log(err);
? ? })總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
這篇文章主要介紹了vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))，本文通過實例代碼給大家介紹的詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案,關(guān)于這個問題,通常是由于插件名稱輸入錯誤、網(wǎng)絡(luò)問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細,需要的朋友可以參考下2023-04-04
vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vuex操作state對象的實例代碼,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
本文將結(jié)合實例代碼，介紹vue使用webSocket更新實時天氣的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue中使用elementui實現(xiàn)樹組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實現(xiàn)對樹組件tree右鍵增刪改功能,右擊節(jié)點可進行增刪改，對節(jié)點數(shù)據(jù)進行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
Axios是在前端開發(fā)中常用的一個發(fā)送 HTTP 請求的庫，用過的都知道,篇文章主要給大家介紹了關(guān)于vue的相關(guān)資料,需要的朋友可以參考下2021-10-10
el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容
這篇文章主要給大家介紹了關(guān)于el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下2023-10-10
最近在項目中遇到點擊按鈕復(fù)制鏈接功能,所以這篇文章主要給大家介紹了關(guān)于vue粘貼復(fù)制功能的實現(xiàn)過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
vue?el-table實現(xiàn)動態(tài)添加行和列具體代碼
最近遇到一個動態(tài)增加行和列的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue?el-table實現(xiàn)動態(tài)添加行和列的相關(guān)資料,需要的朋友可以參考下2023-09-09