关于一个账号不可同时登录的问题--前端

OA系统，一个账号不能两个地点同时登录。

实现：登录，登出，关闭浏览器向后台发送账号状态。

难点：系统为vue+elementUi+axios（sessionstorage存储token）技术，登录、登出按钮click无难度，重难点为关闭浏览器发送登出状态。

1、关闭浏览器发状态不能使用axios（不能是异步请求），vue技术不再引用jquery（即不使用ajax），所以请求部分用到原生ajax五部曲完成（不需要处理返回参数所以不需要五部）。

    代码：

　　var xhr = new XMLHttpRequest()

　　let urlO = "接口" //(get请求的参数直接拼接在连接上)

　　let obj =  JSON.stringify({key:val})// (post请求的参数)

　　xhr.open('post',urlO,false) //(第一个参数为请求类型，第二个参数为接口地址，第三个参数为是否异步)

　　xhr.setRequestHeader('Content-type','application/json') //post请求需要设置请求头，get不需要

　　xhr.send(obj) //get请求直接为 xhr.send()

扫描二维码关注公众号，回复： 5224807 查看本文章

2、关闭浏览器事件与浏览器刷新事件重叠

　　关闭与刷新同时有的事件：beforeunload,unload

　　刷新时独有的事件：load

    这里由于需求比较急，且查询的screenX的方法以及比较刷新和关闭浏览器两个事件时间差值都无用，所以用了一个性能不太好的方法（关闭时发一个请求，刷新时发两个请求），后续会做相关优化。

　　具体方法：

　　　　1）在beforeunload事件里发送未登录状态码

　　　　2）在load事件里发送已登录状态码

　　　　3）注意在登录页面的刷新情况，因为用的vue技术所以用 this.$route.path 来判断