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分別登錄A
和B
兩個賬號
問題描述
用戶登錄會在緩存中存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)文章希望大家以后多多支持腳本之家!
- Vue實現(xiàn)用戶沒有登陸時,訪問后自動跳轉(zhuǎn)登錄頁面的實現(xiàn)思路
- Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
- vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
- vue 實現(xiàn)用戶登錄方式的切換功能
- VuePress 中如何增加用戶登錄功能
- VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式
- vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決方案
- vue?+elementui?項目登錄通過不同賬號切換側(cè)邊欄菜單的顏色
- Vue實現(xiàn)登錄記住賬號密碼功能的思路與過程
- vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能
相關(guān)文章
vue-cli是什么及創(chuàng)建vue-cli項目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項目的工具,支持創(chuàng)建vue2和vue3的項目,本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項目的方法,感興趣的朋友跟隨小編一起看看吧2023-04-04Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決
這篇文章主要介紹了Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue3使用xgPalyer實現(xiàn)截圖功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何在vue3中使用xgPalyer截圖功能,以及自定義插件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02vue-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)值外傳參,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08