token 和 sessionStorage


在做后台管理項目的時候,用戶首先需要進入登錄界面,此時需要將登錄成功之后由服務器返回給我們的 token 保存到客戶端的 sessionStorage(會話存儲對象)中,有了這個token,我們就可以驗證用戶身份,判斷用戶是否可以訪問除了登錄之外的其他API接口。因此,非常有必要將 token 保存到客戶端中。整個過程如下:

 

至於為什么要保存到 sessionStorage,而不是 localStorage中,原因如下:

sessionStorage 是會話期間的存儲機制。數據只在當前標簽頁共享,存在本地  ,關閉瀏覽器后會清除數據 ,關閉標簽頁清除數據。

localStorage 是持久化的存儲機制,數據會存在瀏覽器中  瀏覽器關了數據也還在,只有清除緩存才會消失。

而 token 只應在當前網站打開期間生效,因此應該保存到 sessionStorage中。

 

設置鍵名(token),值名(res.data.token),點擊登錄按鈕后可以在瀏覽器的 Application中查看

若要獲取token的值,const tokenStr = window.sessionStorage.getItem('token')

接下來驗證一下是否被保存到了 sessionStorage中,初始時為空:

 

 輸入用戶名 admin,密碼123456之后,token會被保存

 

 

 

這里再補充一下路由導航守衛的知識

home頁面(也就是登錄成功后的頁面)應該只有在登錄成功之后才能訪問,但是如果我們把token清除,再刷新頁面,會發現還是可以訪問該頁面

 

 清除token,也就是沒有登錄,但是我們還是可以看到home組件,這就不滿足需求,因為home是一個有權限的頁面,只有登錄才能訪問。這個時候就需要用到路由導航守衛,即如果用戶沒有登錄,但是直接通過URL訪問了特定頁面,這時就需要重新導航到特定頁面

 


免責聲明!

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



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