在做后台管理項目的時候,用戶首先需要進入登錄界面,此時需要將登錄成功之后由服務器返回給我們的 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訪問了特定頁面,這時就需要重新導航到特定頁面