目錄

• vue項目登錄成功拿到令牌跳轉失敗401無登錄信息
• 問題原因
• vue項目登錄處理token令牌問題
• 總結

vue項目登錄成功拿到令牌跳轉失敗401無登錄信息

之前的一個上線半年多的項目，客戶提出一點小需求改動，當跑項目時發現線上沒有問題，線下登錄成功，自動跳轉后驗證登錄人信息時驗證失敗，無登錄信息導致頁面一直停留在登錄頁

登錄請求成功

隨后跳轉頁面后調取當前登錄人信息無效，跳回登錄頁重新登錄

導致頁面一直停留在登錄頁。

問題原因

線下測試環境地址可能存在跨域問題，但是不會報跨域錯誤，部分接口可以訪問，但訪問后的接口數據得不到認可。

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);? ? })

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。