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()
2、關閉瀏覽器事件與瀏覽器刷新事件重疊
關閉與刷新同時有的事件:beforeunload,unload
刷新時獨有的事件:load
這里由於需求比較急,且查詢的screenX的方法以及比較刷新和關閉瀏覽器兩個事件時間差值都無用,所以用了一個性能不太好的方法(關閉時發一個請求,刷新時發兩個請求),后續會做相關優化。
具體方法:
1)在beforeunload事件里發送未登錄狀態碼
2)在load事件里發送已登錄狀態碼
3)注意在登錄頁面的刷新情況,因為用的vue技術所以用 this.$route.path 來判斷