同一个浏览器只能登录一个账号的需求相信是很多前端小伙伴都面临过的问题orwillface，貌似没什么大问题，其实是有问题的。这里介绍一下我尝试各种方法后得到的一个最优解。在窗口1登录admin账号时，复制项目中的地址，在窗口2打开，注意这里是项目中的地址。有一个地方就是登录地址，下面会介绍，看：window2在任意项目打开地址，直接访问我们想要的效果就可以了（各大bat的产品也有同样的效果，没有怀疑）。那么我们如何做到让窗口登录时，其他窗口可以访问项目中的任意地址，而当没有窗口登录时，复制的项目中的地址不能访问（安全问题），让它跳转到登录页面代码：我们在main.jsrouter.beforeEach((to,from,next)=>{//这里在所有路由跳转之前都会进行如下操作if(to.path=='/'){//如果去的是登录页面next()//那么随意，去吧}else{//如果没有if(localStorage.getItem('isLogin')){//判断是否有alreadyiteminthelocalstorageofthelocalstorageofthecurrentbrowserLogininformationnext()//如果是，ok，去你想去的地址}else{//如果不是，则表示没有登录next({path:'/'})//进入登录页面}}})这里的isLogin是我命名的，在login.vue登录的时候存储在本地，当然也可以存储接口返回的用户信息，随便你//当登录按钮执行登录时，asf或者为什么保存的是localStorage而不是sessionStore，区别自己百度吧，相信大家就明白了localStorage.setItem("isLogin",1)这里需要注意的是清除登录状态的操作应该在退出按钮被按下，否则本地存储会一直保留（不要手动清除缓存情况）//在执行注销操作时执行localStorage.removeItem("isLogin")，这里应该没有问题，是正常的操作>o{localStorage.setItem("isLogin",1)global.aaa=res.obj.id//这里是登录成功时赋值的地方，我创建的aaa这个变量就是一个例子localStorage.setItem('userId',res.obj.id)//同时我们需要做的是把这个用户id存入localStoragethis.$router.push({path:'/container'})}).catch(err=>{this.$message.error(err.msg)})}}}我们登录成功后，会在本地代码中保存用户id，同时在浏览器的localStorage中保存一个文件。接下来在main.js中importglobalfrom'@/config/common.js'window.addEventListener("visibilitychange",function(){//这个方法是监听浏览器窗口变化时if(document.hidden==false&&global.aaa!=localStorage.getItem('userId')){global.aaa=localStorage.getItem('userId')//只有当最初创建的aaa不等于localStorage中的userId时才覆盖这个aaa}//如果不覆盖，aaa永远是我们设置的初始值});最后我们在app.vue中监听这个全局变量的变化watch:{'global.aaa':'refresh'},methods:{refresh(){//执行刷新操作，我没写这个$route.go(0)这里，因为整个页面抖动不是很友好//现在app.vue下的head组件和menu组件，content组件隐藏后释放，达到刷新一样的效果this.hackReset=falsethis.$nextTick(()=>{this.hackReset=true})}}好了，在第二个窗口重新登录一个账号，回到第一个窗口的时候，在改窗口注册的账号会被挤掉，整个页面会同步到第二个登录的账号信息窗户。这样的效果就实现起来了！！！代码里没有什么很深奥的东西可以写，但是思路很重要，有点曲折。实现功能发现后，又掉了几根头发。/p/89b...如果觉得文章写的不错，请点击↑链接关注作者，给文章点个赞~学习交流请点击：https://shimo.im/sheets/CTCH8...
