先說點什么
vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎介紹,用的是登錄狀態存儲sessionStorage的方法!!!
進入正題
刷新
刷新相當與重啟項目，之前獲取到的數據也只是通過store暫存起來，項目關閉時就不見了，這有些像電腦重啟，存儲在RAM的數據會消失。但是儲存在sessionstorage、localstorage和cookie里的內容不會消失.
Vuex
方法思路
首先得熟悉vuex,官網中介紹 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式,也就是說vuex中的store中的數據都是臨時的,都是一些變量,頁面刷新重新加載,所有都清空,并且已經在頁面中沒有進行二次登陸,vuex中就一直是空的,所以就分生出了幾個方法
1.因為sessionstorage(關閉頁面會消失)、localstorage和cookie刷新頁面數據不會消失,所以可以把所有請求到的數據都儲存在里邊,用的時候再取
2.使用vuex插件
3.登錄的時候把token和登錄狀態(自定義的)賦值給sessionstorage,當刷新頁面的時候(路由跳轉)從 sessionstorage中獲取token和登錄狀態賦值給store,就會自己重新請求相關頁面的數據
我思考過后我選擇了方法3,只不過這個方法要和路由攔截結合起來,后面路由完事一起貼代碼
代碼
index
actions
// 登錄 Login({ commit, state }, userInfo) { return new Promise((resolve, reject) => { login(userInfo).then(response => { let token = response.data.token; commit('SET_TOKEN', token); sessionStorage.setItem('token', token); //獲取到新的token的時候賦值給sessionStorage commit('SET_ISLOGIN', true); // 登錄成功修改store中的登錄狀態 resolve() }).catch(error => { reject(error) }) }) },路由
簡單介紹: 路由攔截就相當于路由的'生命周期',在路由的不同時間段插入一個方法,可以在此時間段想要做什么事情,本次只在路由跳轉前搞事情,所以只使用router.beforeEach((to, from, next) => { // ... })即可,具體內容官網都很詳細
main.js
router.beforeEach((to, from, next) => { let isLogin = sessionStorage.getItem('isLogin'); let token = sessionStorage.getItem('token'); let id = sessionStorage.getItem('id'); if (to.meta.requireAuth) { // 判斷是否有權限 if (!store.state.isLogin && !isLogin && to.path !== '/login') { // store和sessionStorage中登錄狀態都為false并且跳轉到 不是登錄的頁面時 都強行跳轉到登錄頁面 next({ path: '/login', }); } else if (!isLogin && to.path !== '/login') { // 已經在登錄頁面進入首頁的時候 sessionStorage.setItem('isLogin', store.state.isLogin); next(); } else if (isLogin && to.path !== '/login') { // 登錄進入后刷新頁面時 store.commit('SET_TOKEN', token); store.commit('SET_ISLOGIN', isLogin); store.commit('SET_ID', id); next(); } else { next(); } } else { next(); }});坑
1.路由攔截我是寫在main.js文件中的,要注意 一定要寫在vue掛載的上面(new Vue)
2.當點擊登錄的時候 actions中的登錄方法要早于路由攔截
3.退出的登錄的時候 不要忘記把sessionStorage里的變量刪除
最后再說點什么
希望本文可以給你提供一些幫助,這是我最高興的,覺得我有寫的不對或者有問題的地方也請幫我指正出來,大家互相幫助互相進步!!!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
