小结一下,登录如何判断不同标签页登录两个账号的问题

今天无意中作出了,检测两个标签页登录两个账号的方法;

是这样的,这个项目,如果多账号登录的话,会出现一些古怪的现象,两个账号的个人信息不一样,支付订单信息却是一样的,同步的,这很可怕,

出现这样的原因是,代码不够规范,后端有用session来判断是不是同一个人的,也有的接口是根据userid来获取信息的,我将一些项目的配置信息存在了vuex中,并将vuex中的state值在刷新前都会在localStorage中存一份,放置刷新页面后vuex中的值丢失。(这个是一个小突破,但不是今天的重点)。

问了解决在两个标签页中登录两个账号,信息错乱的问题,我想了个比较直接的方法。

1、先说登录是怎么做的,刚开始为了限制登录两个账号,后端写了两个方法,退出登录的方法,和检测是否登录的方法,当进入项目首页时检测是否登录,若登录过,就跳到内容页,如果没有登录,则加载首页内容,登录的时候,我会设置userid和username和loginstatus在vuex中存一份,在localStorage中存一份。

2、当在一个页面登录时,很简单,通过后端的接口就可以判断出是否有账号登录,以为后端用的是后台session判断的,如果登录过就提示,退出当前账号才能登录。

3、如果在一个标签页登录过后,在用网址打开先标签页,如果登录,会让直接到内容页,如果没登录,会在首页停着

4、有一个骚操作是,单开一个标签页登录,再用连接打开标签页,之后项目会跳到内容页,此时不操作第一个标签页(登录过账号的),将第二个标签页中的账号退出,然后重新登录个不一样的账号,此时就出现了,信息错乱的问题,为了避免这样的问题,就简单的办法就是只能让一个浏览器登录一个账号。

5、那么当一个新的账号登录后,老的标签页如何知道有新账号登录了呢?于是就调试,找不同。

6、我猜测,信息错乱可定是有些接口是用session来判断用户的唯一标识的,有些接口是用userid来判断用户的唯一标识的,session我下不了手,只能从userid下手,我发现,刚登录的新账号vuex中的userid和localStorage中的userid是一样的,因为刚登录,是同时设置的,但是老标签页中的vuex中的userid还是自己账号的userid但是localStorage中的userid却被新账号的userid覆盖了,此时老标签页中的localStorage中的userid和vuex中的userid已经不一样了,这不是有差别了嘛,于是就在axios的响应拦截器汇总判断vuex中的userid和localStorage中的userid是否一样(前提是两个都存在),如果一样表示是最新登录的账号,不做任何操作,如果不一样,只有在老标签页中会出现的情况,那么此时就不能让客户对老标签页的内容进行改动,否则会出大问题。于是就在响应回调里判断如果两者不一样则,关闭标签页,这样就很好的避免客户出错了。

7、解决问题的过程中遇到不少问题,后端要使用同一的东西去识别唯一标识,要不会遇到向我遇到的麻烦事,另外,在edge浏览器上,localStorage每个标签页时独立的,如果不同步,我的这种方法就出错了,就会出现量标签也的信息错乱问题,网上一个解决办法是,个window加个storage监听事件,什么都不用做,在edge中两个标签页之间的localStorage就同步了,在edge找那个就不会出问题了。

猜你喜欢

转载自www.cnblogs.com/fqh123/p/12375324.html
今日推荐