首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue同一浏览器登录多账号

vue同一浏览器登录多账号处理方案

2024-01-19 11:53:44 作者：九段刀客

项目在线上会遇到管理员类似权限比较大的用户,会在同一浏览器登陆多个账号,遇到这样的问题如何处理呢,下面小编给大家介绍vue同一浏览器登录多账号处理方法,感兴趣的朋友一起看看吧

vue同一浏览器登录多账号处理

背景

项目在线上会遇到管理员类似权限比较大的用户，会在同一浏览器登陆多个账号。由于后端是通过cookie识别，此时cookie已经是最新登陆账号信息。管理员有可能切换tab至之前页面，此时页面显示还是之前信息，当修改信息，提交请求时，其实后端是按照最新登陆用户进行信息处理的。这种情况下，容易误导用户，造成错误的信息修改。

解决

前端种个cookie，监听页面tab切换事件，通过接口返回的id与cookie中的id对比，若不一致，则提示用户刷新页面，页面重新渲染，展示的就是最新登陆用户的信息了

具体实现

store.js

// 装js-cookie种cookie
import Cookies from 'js-cookie';
// 每次登录的时候，通过接口获取当前登录账号的LoginName
getLoginName() {
        return api
            .getLoginName()
            .then((res) => {
                if (res.status === 0) {
                // 这里通过vuex存下来 在app.vue里使用（项目本身已使用vuex 没有的话可以参考vue组件通信）
                commit('RECORD_LOGIN_NAME', res.loginName);
                // 拿到结果，存到cookie里
                	this.loginName = res.loginName
                    Cookies.set('loginName', res.loginName);
                }
            })
            .catch((e) => {
                return false;
            });
    },

app.vue
在入口页添加监听页面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;
                // 这里样式可以根据项目优化
                alert(`已登录${loginName_cookie}，点击 “确定” 刷新本页面。`);
                window.location.reload();
            	this.isConfirmShow = false;
            }
        }
    },
    mounted() {
        document.addEventListener('visibilitychange', this.checkNameExpired);
    },
    beforeDestroy() {
        document.removeEventListener('visibilitychange', this.checkNameExpired);
    }
};

补充：

vue项目中实现同一个浏览器登录多个用户账号

需求

同一个浏览器两个tab分别登录A和B两个账号

问题描述

用户登录会在缓存中存token，键名都是一样的，所以会出现A用户登录，后在另外一个tab里登录B用户，A用户再访问接口的时候，其实是用的B用户的token，因为每个用户的权限不一样，这样就照成了bug

解决思路

让不同的用户存储的token的键名不一样

实现方法在登录的时候存储用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 || "");
    });

到此这篇关于vue同一浏览器登录多账号处理的文章就介绍到这了,更多相关vue同一浏览器登录多账号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue同一浏览器登录多账号处理方案