vue路由全局前置守卫

路由(router > index.js)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//解决重复点击路由报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/',
      component: layout,
      children: [
        {
          path: '',
          name: 'model_selection',
          component: modelSelection
        }
      ]
    },
    {
      path: '/department_login',
      name: 'department_login',
      component: departmentLogin
    },
    {
      path: '/department',
      name: 'department_layout',
      component: departmentLayout
    }
  ]
})

路由守卫（routerGuards.js)

import router from './router'
import store from './store'
import {getToken} from './common/auth'

// 白名单
const whiteList = ['/login','/department_login','/department']

//路由全局前置守卫
router.beforeEach((to, from, next) => {
  let token = getToken()
  if (token) {
    // 有token访问login页面，就跳到首页
    if (to.path === '/login') {
      next('/login')
    } else {
      if (store.getters.realName === '') {
        store.dispatch('pullUserInfo').then(resp => {
          //获取用户信息失败  返回登录界面
          if (resp === null) {
            store.dispatch('logout').then(() => {
              next('/login')
            })
          }
          
          next({
            ...to,
            replace: true
          })
        }).catch(res => {
          //如果不是登陆过期或未登陆，退出登陆
          if (res.code !== '10204') {
            store.dispatch('logout').then(() => {
              next('/login')
            })
          }
        })
      } else {
        next()
      }
    }
  } else {
    // 白名单，免密登录
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 否则就跳动登录页面
      next('/login')
    }
  }
})

store > modules > user.js (vuex)

import api from '../../api'
import {
  getToken, setToken, removeToken,
  getUserId, setUserId, removeUserId,
  getUserName, setUserName
} from '../../common/auth'

const SET_USER_TOKEN = 'SET_USER_TOKEN'
const SET_USER_ID = 'SET_USER_ID'
const SET_USER_NAME = 'SET_USER_NAME'

const user = {
  state: {
    userToken: getToken(),
    id: getUserId(),
    userName: ''
  },
  mutations: {
    [SET_USER_TOKEN](state, userToken) {
      state.userToken = userToken
    },
    [SET_USER_ID](state, userId) {
      state.id = userId
    },
    [SET_USER_NAME](state, username) {
      state.userName = username
    }
  },
  actions: {
    /**
     * 拉取用户信息
     * @param commit
     */
    pullUserInfo ({commit, rootState}) {
      return new Promise((resolve, reject) => {
        api.login.getUserInfo(rootState.user.userToken).then(resp => {
          let data = resp.data
          if (data !== null) {
            setToken(data.userToken)
            setUserId(data.id)
            setUserName(data.username)
            commit(SET_USER_TOKEN, data.userToken)
            commit(SET_USER_ID, data.id)
            commit(SET_USER_NAME, data.username)
          }
          return resolve(data)
        }).catch(err => {
          return reject(err)
        })
      })
    }
  }
}
export default user