關於一個賬號不可同時登錄的問題--前端


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 來判斷

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM