先說點(diǎn)什么

vuex和路由攔截這一塊搗鼓的有一段時(shí)間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎(chǔ)介紹,用的是登錄狀態(tài)存儲(chǔ)sessionStorage的方法!!!

進(jìn)入正題

刷新

刷新相當(dāng)與重啟項(xiàng)目，之前獲取到的數(shù)據(jù)也只是通過store暫存起來，項(xiàng)目關(guān)閉時(shí)就不見了，這有些像電腦重啟，存儲(chǔ)在RAM的數(shù)據(jù)會(huì)消失。但是儲(chǔ)存在sessionstorage、localstorage和cookie里的內(nèi)容不會(huì)消失.

Vuex

方法思路

首先得熟悉vuex,官網(wǎng)中介紹 Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,也就是說vuex中的store中的數(shù)據(jù)都是臨時(shí)的,都是一些變量,頁(yè)面刷新重新加載,所有都清空,并且已經(jīng)在頁(yè)面中沒有進(jìn)行二次登陸,vuex中就一直是空的,所以就分生出了幾個(gè)方法

1.因?yàn)閟essionstorage(關(guān)閉頁(yè)面會(huì)消失)、localstorage和cookie刷新頁(yè)面數(shù)據(jù)不會(huì)消失,所以可以把所有請(qǐng)求到的數(shù)據(jù)都儲(chǔ)存在里邊,用的時(shí)候再取

2.使用vuex插件

3.登錄的時(shí)候把token和登錄狀態(tài)(自定義的)賦值給sessionstorage,當(dāng)刷新頁(yè)面的時(shí)候(路由跳轉(zhuǎn))從 sessionstorage中獲取token和登錄狀態(tài)賦值給store,就會(huì)自己重新請(qǐng)求相關(guān)頁(yè)面的數(shù)據(jù)

我思考過后我選擇了方法3,只不過這個(gè)方法要和路由攔截結(jié)合起來,后面路由完事一起貼代碼

代碼

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的時(shí)候賦值給sessionStorage

    commit('SET_ISLOGIN', true);  // 登錄成功修改store中的登錄狀態(tài)
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

路由

簡(jiǎn)單介紹: 路由攔截就相當(dāng)于路由的'生命周期',在路由的不同時(shí)間段插入一個(gè)方法,可以在此時(shí)間段想要做什么事情,本次只在路由跳轉(zhuǎn)前搞事情,所以只使用router.beforeEach((to, from, next) => { // ... })即可,具體內(nèi)容官網(wǎng)都很詳細(xì)

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) {  // 判斷是否有權(quán)限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登錄狀態(tài)都為false并且跳轉(zhuǎn)到 不是登錄的頁(yè)面時(shí) 都強(qiáng)行跳轉(zhuǎn)到登錄頁(yè)面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已經(jīng)在登錄頁(yè)面進(jìn)入首頁(yè)的時(shí)候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登錄進(jìn)入后刷新頁(yè)面時(shí)
   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.當(dāng)點(diǎn)擊登錄的時(shí)候 actions中的登錄方法要早于路由攔截
3.退出的登錄的時(shí)候 不要忘記把sessionStorage里的變量刪除

最后再說點(diǎn)什么

希望本文可以給你提供一些幫助,這是我最高興的,覺得我有寫的不對(duì)或者有問題的地方也請(qǐng)幫我指正出來,大家互相幫助互相進(jìn)步!!!

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論