思路:
框架使用前端使用 vue 框架,后端nodejs開發
在實現一個賬號一台設備登錄的情況下,我使用了 webJsonToken 插件。
第一步:在創建數據庫表時,在用戶表新建一個字段 webJSONToken (該字段用於記錄用戶登錄狀態)
第二步:在用戶登錄賬號時生成webJSONToken(生成的webJSONToken時可以使用用戶信息,后面會用到),然后把生成的webJSONToken存入到該賬戶的 “webJSONToken” 字段在中(這里需要同步執行,先判斷是否登錄成功,成功 生成token,在保存到數據庫,然后響應登錄成功token)
第三步:前端需要在登錄成功之后,獲取到響應的webJSONToken保存到本地,在每次接口請求時都在header中攜帶token (我使用 請求攔截 axios.interceptors.request 實現每次請求頭添加token)
第四步:后台設置請求攔截,每次請求都去判斷該賬號登錄攜帶 webJSONToken(攜帶的webJSONToken 中包含了該用戶的信息) 和 數據庫的 webJSONToken是否一致,不一致重定向到登錄頁面刪除本地token 或 返回token不一致讓前端處理 (這里請求攔截,登錄、注冊接口沒有必要去攔截,進行判斷一下)
解釋第四步:我登錄的賬號本地保存的 webJSONToken 和 數據庫保存的 webJSONToken 肯定一樣啊,因為登錄接口生成的token保存到數據庫、和本地? (如果 A 用戶登錄了 B 賬號,此時本地保存 token T,數據庫保存 token T,然后 C 用戶再次登錄了 B 賬號,此時 C 用戶本地保存 token K,數據庫保存 token K,A用戶再次請求接口時,攜帶的token T 和 數據庫的 token K 不一致,退出登錄狀態)
注:如果選擇的服務端重定向就不用看第五步了
第五步:返回token不一致讓前端處理: (這里為什么不直接重定向,因為我想讓前台知道token不一致,做一個彈框提示在跳轉,而不是直接跳轉到登錄頁面) 這里后台返回了token不一致,我們要去接收這個狀態做處理,我使用 axios.interceptors.response 響應攔截判斷響應 token 是否不一致,這里也要注意 請求接口 和 注冊接口要過濾掉,如果 token不一致 刪除本地token、彈出框提示、跳轉到登錄頁面 (這里 token不一致,不用在乎token是否過期,因為不一致證明你的賬號被人擠掉了)。
代碼片段:
第一步:在創建數據庫表時,在用戶表新建一個字段 webJSONToken (該字段用於記錄用戶登錄狀態)
第二步:在用戶登錄賬號時生成webJSONToken
第三步:前端需要在登錄成功之后,獲取到響應的webJSONToken保存到本地,在每次接口請求時都在header中攜帶token
第四步:后台設置請求攔截,每次請求都去判斷該賬號登錄攜帶 webJSONToken
第五步:返回token不一致讓前端處理