guahsuVue | vue sessionstorage
https://guahsu.io/Vue-sessionStorage/dist/[1]再vue專案中,如果有使用到vuex來做狀態管理,那很常會遇到一件事情就是重新整理後就遺失了原本的狀態,這裡紀錄我的解決方案:使多頁籤共享SessionStorage並透過同步達到Vuex資料的持久化。常見的登入判斷我們常在頁面判斷(vue-route:beforeEach)中寫下了像這樣的程式:router.beforeEach((to,from,next)=>{consttoken=//各種存放token的地方//頁面跳轉前如果沒token就把帶到登入頁if(!token){next({path:/login})}else{next()}})Token存哪?登入時取回的token我們有幾個地方可以選...
https://guahsu.io/Vue-sessionStorage/dist/[1]
再vue專案中,如果有使用到vuex來做狀態管理,那很常會遇到一件事情就是重新整理後就遺失了原本的狀態,這裡紀錄我的解決方案:使多頁籤共享SessionStorage並透過同步達到Vuex資料的持久化。
常見的登入判斷我們常在頁面判斷(vue-route: beforeEach)中寫下了像這樣的程式:
router.beforeEach((to, from, next) => { const token = // 各種存放token的地方 // 頁面跳轉前如果沒token就把帶到登入頁 if (!token) { next({ path: /login }) } else { next() } }) Token存哪?登入時取回的token我們有幾個地方可以選擇存放:
Vuex優點:可以跟系統內其他vuex互相統一使用vuex的api來操作token,頁面關閉隨之銷毀缺點:當重新整理或開新分頁時就會被登出了(vuex被清除)
Cookie優點:可由server端寫入,省掉前端寫入的工(?)缺點:可被user關閉、最高寫入4k,如果每次請求帶的話100張圖要get就會要多400k流量。
LocalStorage優點:存放不會消失,不需要擔心頁面關閉或重整/新開分頁等問題缺點:因為永久存放(除非user手動清除),必須加上時效性自行判斷,或特殊操作時要將其手動清除
SessionStorage優點:頁籤開著的時候會一直存在著,即使是重新整理,頁籤關閉時會自動銷毀被儲存的資訊缺點:只在當前頁籤存在,開新分頁並不會被傳遞
看起來不論選用哪個都會有優點或缺點,基於Vue專案Vuex是避不太了的基礎上,剩下只能擇一了。
Vuex + SessionStorage這裡我選用Vuex + sessionStorage做搭配,把重要的資訊(User資訊、Token..等)在sessionStorage中做一份備份,當頁面重整時再透過sessionStorage重新賦值給Vuex,來達到程式碼管理的統...