欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決

 更新時(shí)間：2023年02月23日 16:50:15   作者：kis_me  
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息

之前的一個(gè)上線半年多的項(xiàng)目，客戶提出一點(diǎn)小需求改動(dòng)，當(dāng)跑項(xiàng)目時(shí)發(fā)現(xiàn)線上沒有問題，線下登錄成功，自動(dòng)跳轉(zhuǎn)后驗(yàn)證登錄人信息時(shí)驗(yàn)證失敗，無登錄信息導(dǎo)致頁面一直停留在登錄頁

登錄請求成功


登錄成功

隨后跳轉(zhuǎn)頁面后調(diào)取當(dāng)前登錄人信息無效，跳回登錄頁重新登錄


在這里插入圖片描述

導(dǎo)致頁面一直停留在登錄頁。

問題原因

線下測試環(huán)境地址可能存在跨域問題，但是不會(huì)報(bào)跨域錯(cuò)誤，部分接口可以訪問，但訪問后的接口數(shù)據(jù)得不到認(rèn)可。

common.js原地址寫法

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ò)的問題，如上操作是公司大佬傳授的

vue項(xiàng)目登錄處理token令牌問題

1、在點(diǎn)擊登錄按鈕后，后臺會(huì)返回一個(gè)token

2、將得到的token先儲(chǔ)存在sessionStorage中，window.sessionStorage.setItem('token',token)

3、然后就可以在請求攔截器中獲取到存儲(chǔ)的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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論