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

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

總結

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

推薦閱讀: