使用vue-router+vuex實現登錄攔截並記錄登錄狀態

　　由於目前的Vue移動端項目最后會被封裝為安卓應用，所以需要一個登錄攔截並保存登錄狀態。

　　這里演示的內容是將所需的狀態碼記錄到localStorage內（這里本地保存的狀態是“Flag”，如果需使用token的可以考慮將token保存道cookies或者localStroage內），代碼內涉及到的“Toast”為我工程內引入的muse-ui的Toast插件。

1、vue-router的改動（router/index.js）：

　　在路由設置的每個頁面路徑下增加meta，通過這個字段來判斷該路由是否需要登錄權限，isLogin:false表示不需要驗證權限即可進入的頁面，isLogin:true是需要登錄權限驗證才能進入的頁面

routes: [
    {
      path: '/',
      name: 'WelcomePage',
      component: WelcomePage,
      meta: {
        isLogin: false
      }
    },
    {
      path: '/Login',
      name: 'LoginPage',
      component: LoginPage,
      meta: {
        isLogin: false
      }
    },
    {
      path: '/Home',
      name: 'HomePage',
      component: HomePage,
      meta: {
        isLogin: true
      }
    },
    {
      path: '/Message',
      name: 'MessagePage',
      component: MessagePage,
      meta: {
        isLogin: true
      }
    },
    {
      path: '/User',
      name: 'UserPage',
      component: UserPage,
      meta: {
        isLogin: true
      }
    }
  ]

2、main.js內的改動：

　　這里我將路由守衛寫到了main.js 內，這個根據個人安排也可以放到router的相關文件內，不過需要一些小改動。

　　利用vue-router提供的鈎子函數beforeEach對路由進行判斷：

router.beforeEach((to, from, next) => {
  let getFlag = localStorage.getItem('Flag') /* 這里是判斷用戶是否登錄過，因為在用戶登錄后會在localStroage內存儲Flag=isLogin */
  if (getFlag === 'isLogin') { /* 如果存在Flag並且為isLogin意味着用戶登錄，這時修改vux內state下isLogin的狀態 */
    store.state.isLogin = true
    next()
    if (!to.meta.isLogin) { /* 如果在有登錄狀態的情況下前往不需要權限的路由路徑，則判定為退出登錄，進行提示並跳轉登錄頁 */
      Toast.info('退出成功')
      next({
        path: '/Login'
      })
    }
  } else {
    if (to.meta.isLogin) { /* 如果沒有登錄狀態且要去往需要權限的路徑時跳轉登錄頁並進行提示 */
      next({
        path: '/Login'
      })
      Toast.info('請先登錄')
    } else {
      next()
    }
  }
})

router.afterEach(route => {
  window.scroll(0, 0)
})

　　鈎子函數beforeEach方法接收三個參數： to、from、next；

1. to: Route: 即將要進入的目標路由對象
2. from: Route: 當前導航正要離開的路由
3. next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

　　其中next需要注意的是：

1. next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。
2. next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

　　確保要調用 next 方法，否則鈎子就不會被 resolved。

　　“to.meta”中是我們自定義的數據，其中就包括我們剛剛定義的isLogin字段，通過這個字段來判斷該路由是否需要登錄權限。

3、Vuex的相關設置（vuex/index.js）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLogin: false
  },
  getters: {
    isLogin: state => state.isLogin
  },
  mutations: {
    userStatus (state, flag) {
      state.isLogin = flag
    }
  },
  actions: {
    setUser ({commit}, flag) {
      commit('userStatus', flag)
    }
  }
})

 

4、登錄及退出登錄的需要注意的點：

　　注意標紅的內容。

　　登錄：

loginBack (res) {
      let resBack = res.Back
      let resData = res.Data
      if (resBack === '1') {
        this.loginLoading = false
        let userName = this.userName
        this.$store.dispatch('setUser', true)
        localStorage.setItem('Flag', 'isLogin')
        localStorage.setItem('username', userName)
        this.$toast.info(resData)
        this.$router.replace('/Home')
      } else {
        this.loginLoading = false
        this.$toast.error(resData)
      }
    }

　　退出登錄：

loginOut () {
      localStorage.removeItem('Flag')
      localStorage.removeItem('username')
      this.$toast.info('退出成功')
      this.$router.replace('/Login')
    }

 

這樣基本上能實現登錄權限攔截功能了，實際中如果需要帶上token驗證的，可以和axios攔截器配合使用。