Vue.js + beforeRouteUpdate實現登錄校驗的跳轉

首先我們需要調用一個後臺的登錄服務，但是每次刷新的時候，都會離線，所以有調用一個可以校驗是否在線的服務這個，通過校驗是否登錄我們進行跳轉登錄頁面還是，登錄成功之後進入系統主頁面，然後將用戶的信息存入到vuex中，供其他的模塊調用

首先看我的vuex配置模塊的結構是這樣的

在vuex / index.js中這樣配置

import Vue from "vue"
import Vuex from "vuex"
import Login from "./stores/login/store.js"
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        Login,
    }
})

 然後進入vuex / login /mutation-types.js  

/**
 * login
 */

/*mutations*/
export const SET_USERINFO = 'login/SET_USERINFO'
export const SET_HAVELOGIN = 'login/SET_HAVELOGIN'
export const SET_MENUS = 'login/SET_MENUS'

/*getters*/
export const userInfo = 'login/userInfo'
export const haveLogined = 'login/haveLogined'
export const menus = 'login/menus'

/*actions*/
export const login = 'login/login'
export const getSession = 'login/getSession'
export const getUserSession = 'login/getUserSession'
export const logout = 'login/logout'
export const getMenus = 'login/getMenus' //獲取權限菜單

 然後進入vuex / login /store.js   這一部分是用的hrpose調用不會配置的可以參考我的上幾篇

import * as TYPES from './mutation-types.js'
import {
  javaclient,netclient
} from '../../../httpclient.js'
const state = {
  userInfo: {},
  haveLogined: false,
  menus: null,
};

const mutations = {
  [TYPES.SET_USERINFO]: (state, userInfo) => state.userInfo = userInfo,
  [TYPES.SET_HAVELOGIN]: (state, loginState) => {
    state.haveLogined = loginState
  },
  [TYPES.SET_MENUS]: (state, menus) => {
    state.menus = menus;
  },

};
const getters = {
  [TYPES.userInfo]: ({
    userInfo
  }) => userInfo,
  [TYPES.haveLogined]: ({
    haveLogined
  }) => haveLogined,
  [TYPES.menus]: ({
    menus
  }) => menus,
};

const actions = {
  [TYPES.login]: async ({
    dispatch
  }, {username,password}) => {
    return await javaclient.invoke('loginTest', [username,password])
  },
  [TYPES.logout]: async ({
    dispatch
  }) => {
    return await javaclient.invoke('userOut');
  },
  [TYPES.getSession]: async ({
    dispatch
  }) => {
    return await javaclient.invoke('isLogin');
  },
  [TYPES.getMenus]: async ({
    dispatch
  },{id,sid}) => {
    return await netclient.invoke('GetFunByUserID2SystemID', [id, sid]);
  },
  



}

export default {
  state,
  getters,
  mutations,
  actions,
}

然後在router /  index.js中配置主路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/login'
import Main from '@/components/Main/main'
import home from './routers/home.js'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'main',
      component: Main,
      redirect: '/main/home',
      children: [
        home,
      ]
    }
  ]
})

然後在router / routers / home.js中配置子路由

import home from '../../components/Main/components/Map/map.vue'
export default {
  path: '/main/home',
  name: 'home',
  redirect: '/main/home_list',
  component: home,
  children: [{
    path: '/main/home_list',
    name: 'home_list',
    // component: resolve => require(['@/components/Main/modules/home/_modules/list.vue'], resolve),
    component: resolve => require(['@/components/Main/components/Map/map.vue'], resolve),
    meta: {
      name: '首頁',
      parent: ''
    }
  }, {
    path: '/protocol/protocol_apply',
    name: 'mapbox_list',
    component: resolve => require(['@/components/Main/modules/mapbox/_modules/list.vue'], resolve),
    meta: {
      name: 'mapbox',
      parent: ''
    }
  }, ]
}

最後校驗是否登錄狀態的我單獨引用了一個文件

 

function beforeRouteUpdate(to, from, next, store) {
  let {
    path
  } = to;
  if(path=='/login'){
    next();
    return
  }
  // console.log(store.state.Login.haveLogined,"store.state.Login.haveLogined")
  if (store.state.Login.haveLogined) {
    next();
  } else {
    store.dispatch('login/getSession').then(res => {
      let data = JSON.parse(res);
      if (data.status == 0) {
        store.commit('login/SET_USERINFO', data.result.user)
        store.commit('login/SET_HAVELOGIN', true)
        let param = {
          id: store.state.Login.userInfo.ID,
          sid: 1,
        }
        store.dispatch('login/getMenus', param).then(res=>{
          let data=JSON.parse(res)
          if(data.IsSuccess && data.ResultValue.length > 0){
            store.commit('login/SET_MENUS', data.ResultValue)
            next()
          }
          else{
            this.$message.error("沒有權限進入系統")
          }

        })
      } else {
        store.commit('login/SET_USERINFO', {})
        store.commit('login/SET_HAVELOGIN', false)
        next('/login')
      }
    })
  }
  
}
export default (router, store) => {
  router.beforeEach((to, from, next) => {
    beforeRouteUpdate(to, from, next, store)
  })
}

要在main.js中引用下，這樣就完成了

import beforeRouteUpdate from './router/beforeRouteUpdate.js'
beforeRouteUpdate(router,store)