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

vue同一瀏覽器登錄多賬號處理方案

 更新時間:2024年01月19日 11:53:44   作者:九段刀客  
項目在線上會遇到管理員類似權(quán)限比較大的用戶,會在同一瀏覽器登陸多個賬號,遇到這樣的問題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號處理方法,感興趣的朋友一起看看吧

vue同一瀏覽器登錄多賬號處理

背景

項目在線上會遇到管理員類似權(quán)限比較大的用戶,會在同一瀏覽器登陸多個賬號。由于后端是通過cookie識別,此時cookie已經(jīng)是最新登陸賬號信息。管理員有可能切換tab至之前頁面,此時頁面顯示還是之前信息,當(dāng)修改信息,提交請求時,其實后端是按照最新登陸用戶進(jìn)行信息處理的。這種情況下,容易誤導(dǎo)用戶,造成錯誤的信息修改。

解決

前端種個cookie,監(jiān)聽頁面tab切換事件,通過接口返回的id與cookie中的id對比,若不一致,則提示用戶刷新頁面,頁面重新渲染,展示的就是最新登陸用戶的信息了

具體實現(xiàn)

store.js

// 裝js-cookie種cookie
import Cookies from 'js-cookie';
// 每次登錄的時候,通過接口獲取當(dāng)前登錄賬號的LoginName
getLoginName() {
        return api
            .getLoginName()
            .then((res) => {
                if (res.status === 0) {
                // 這里通過vuex存下來 在app.vue里使用(項目本身已使用vuex 沒有的話可以參考vue組件通信)
                commit('RECORD_LOGIN_NAME', res.loginName);
                // 拿到結(jié)果,存到cookie里
                	this.loginName = res.loginName
                    Cookies.set('loginName', res.loginName);
                }
            })
            .catch((e) => {
                return false;
            });
    },

app.vue
在入口頁添加監(jiān)聽頁面tab切換的事件

export default{
    data () {
        return {
            isConfirmShow: false,
        };
    },
    methods: {
        checkNameExpired() {
            // this.loginName:接口請求獲取name的存下來
            const loginName_cookie = Cookie.get('loginName');
            if (this.loginName !== loginName_cookie && !this.isConfirmShow) {
                this.isConfirmShow = true;
                // 這里樣式可以根據(jù)項目優(yōu)化
                alert(`已登錄${loginName_cookie},點擊 “確定” 刷新本頁面。`);
                window.location.reload();
            	this.isConfirmShow = false;
            }
        }
    },
    mounted() {
        document.addEventListener('visibilitychange', this.checkNameExpired);
    },
    beforeDestroy() {
        document.removeEventListener('visibilitychange', this.checkNameExpired);
    }
};

補(bǔ)充:

vue項目中實現(xiàn)同一個瀏覽器登錄多個用戶賬號

需求

同一個瀏覽器兩個tab分別登錄AB兩個賬號

問題描述

用戶登錄會在緩存中存token,鍵名都是一樣的,所以會出現(xiàn)A用戶登錄,后在另外一個tab里登錄B用戶,A用戶再訪問接口的時候,其實是用的B用戶的token,因為每個用戶的權(quán)限不一樣,這樣就照成了bug

解決思路

讓不同的用戶存儲的token的鍵名不一樣

實現(xiàn)方法 在登錄的時候存儲用TOKEN+userName作為鍵來存儲token

import Cookies from 'js-cookie'
import Config from '@/config'
const TokenKey = Config.TokenKey;
export function getToken() {
  return Cookies.get( TokenKey + sessionStorage.getItem( 'username' ) )
}
export function setToken( token, rememberMe, username ) {
  if ( rememberMe ) {
    return Cookies.set( TokenKey + username, token, { expires: Config.tokenCookieExpires } )
  } else {
    return Cookies.set( TokenKey + username, token )
  }
}
export function removeToken( username ) {
  return Cookies.remove( TokenKey + username )
}

頁面刷新前存儲用戶名

    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("username", this.user.username || "");
    });

到此這篇關(guān)于vue同一瀏覽器登錄多賬號處理的文章就介紹到這了,更多相關(guān)vue同一瀏覽器登錄多賬號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue 實現(xiàn)輪播圖功能的示例代碼

    Vue 實現(xiàn)輪播圖功能的示例代碼

    Vue是一款流行的前端框架,它提供了一系列的工具和組件,使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序,輪播圖是Web應(yīng)用程序中常見的一種交互式組件,本文將介紹如何使用Vue和第三方組件庫 Element UI實現(xiàn)輪播圖功能,需要的朋友可以參考下
    2023-05-05
  • vue-cli是什么及創(chuàng)建vue-cli項目的方法

    vue-cli是什么及創(chuàng)建vue-cli項目的方法

    vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具,支持創(chuàng)建vue2和vue3的項目,本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項目的方法,感興趣的朋友跟隨小編一起看看吧
    2023-04-04
  • Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決

    Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決

    這篇文章主要介紹了Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue3使用xgPalyer實現(xiàn)截圖功能的方法詳解

    vue3使用xgPalyer實現(xiàn)截圖功能的方法詳解

    這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • Vue中的偵聽器及使用場景

    Vue中的偵聽器及使用場景

    Vue中的偵聽器是一種響應(yīng)式機(jī)制,可以對指定的數(shù)據(jù)進(jìn)行監(jiān)聽,并在數(shù)據(jù)變化時執(zhí)行相應(yīng)的回調(diào)函數(shù)。常用于監(jiān)聽復(fù)雜數(shù)據(jù)類型的變化,如對象和數(shù)組。通過偵聽器,可以實現(xiàn)數(shù)據(jù)的自動更新和邏輯處理等功能,提高代碼的可讀性和可維護(hù)性
    2023-05-05
  • vue實現(xiàn)各種文件文檔下載及導(dǎo)出示例

    vue實現(xiàn)各種文件文檔下載及導(dǎo)出示例

    這篇文章主要介紹了vue實現(xiàn)各種文件文檔下載及導(dǎo)出示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue-cli3.0+element-ui上傳組件el-upload的使用

    vue-cli3.0+element-ui上傳組件el-upload的使用

    這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • 淺談vue中$event理解和框架中在包含默認(rèn)值外傳參

    淺談vue中$event理解和框架中在包含默認(rèn)值外傳參

    這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認(rèn)值外傳參,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue路由傳參三種基本方式詳解

    vue路由傳參三種基本方式詳解

    這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-12-12
  • JavaScript之實現(xiàn)一個簡單的Vue示例

    JavaScript之實現(xiàn)一個簡單的Vue示例

    這篇文章主要介紹了JavaScript之實現(xiàn)一個簡單的Vue示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論