登錄狀態的實現是java生成一個token而後前端在發送請求時將token帶入請求頭去請求數據,若是token失效則沒法返回。javascript
在前端這裏,咱們須要用本地存儲將token暫時存起來,發送請求的時候再讀取。對於vue項目,vuex在刷新的時候就會初始化。因此只能用瀏覽器存儲方式纔可讓token一直存在。前端
localstorage和session的區別爲 頁面關閉後localstorage還存在。session在頁面關閉以後就被銷燬了。vue
要注意:vue destroyed鉤子函數在頁面刷新時也會執行,不要將清除localstorage 的函數寫在destroyed函數中java
要注意:vue destroyed鉤子函數在頁面刷新時也會執行,不要將清除localstorage 的函數寫在destroyed函數中vuex
要注意:vue destroyed鉤子函數在頁面刷新時也會執行,不要將清除localstorage 的函數寫在destroyed函數中後端
若是需求要求頁面關閉 將token存儲在session中就能夠了若是有要求過時時間 也好辦瀏覽器
若是有要求退出後必定時間後仍是登錄狀態,在後端設置過時時間,使用localstorage 存儲cookie便可,token過時時,在http攔截器中設置清楚token便可緩存
關鍵點在這裏:cookie的存儲空間比localstorage小 並且功能也同樣, 可是cookie能夠經過設置共享域,實現二級域名共享cookie數據。這樣就能夠實現部署在同一個域名下不一樣的二級域名登陸狀態互通。cookie
我用的是 js-cookiessession
這裏寫上 js-cookies 代碼
cookies.set('token', '這裏是你的token', {path: '/',domain: '.jd.com'})
cookies.remove('token', { path: '/', domain: '.jd.com' })
複製代碼
path爲cookie目錄 目前還沒學會設置這個
domain爲cookie共享域的一級域名。這裏用京東示例
cookie清除函數要設置爲和cookie寫入函數一樣的做用域才能移除要移除的屬性
總結:固然嘍 cookie的存儲空間有限,用的時候要當心空間不夠,只存儲token固然是沒問題的,二級域名共享cookie能夠幫咱們緩存更多的東西,可是存儲大量內容的時候必定要注意計算cookie空間,避免沒必要要的麻煩