刷新頁面vuex數據不消失和不跳轉頁面

時間 2019-11-06

標籤刷新頁面 vuex 數據不消失和简体版

原文原文鏈接

先說點什麼

vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特意來分享一下,首先聲明沒有什麼基礎介紹,用的是登陸狀態存儲sessionStorage的方法!!!vue

進入正題

刷新

刷新至關與重啓項目，以前獲取到的數據也只是經過store暫存起來，項目關閉時就不見了，這有些像電腦重啓，存儲在RAM的數據會消失。可是儲存在sessionstorage、localstorage和cookie裏的內容不會消失.vuex

Vuex

方法思路

首先得熟悉vuex,官網中介紹 Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式,也就是說vuex中的store中的數據都是臨時的,都是一些變量,頁面刷新從新加載,全部都清空,而且已經在頁面中沒有進行二次登錄,vuex中就一直是空的,因此就分生出了幾個方法

1.由於sessionstorage(關閉頁面會消失)、localstorage和cookie刷新頁面數據不會消失,因此能夠把全部請求到的數據都儲存在裏邊,用的時候再取
2.使用vuex插件
3.登陸的時候把token和登陸狀態(自定義的)賦值給sessionstorage,當刷新頁面的時候(路由跳轉)從 sessionstorage中獲取token和登陸狀態賦值給store,就會本身從新請求相關頁面的數據cookie

我思考事後我選擇了方法3,只不過這個方法要和路由攔截結合起來,後面路由完事一塊兒貼代碼

代碼

index
session

actionsui

// 登陸
  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) => { // ... })便可,具體內容官網都很詳細spa

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();
  }
});