vue路由守卫，本人的路由守卫示例，仅供参考

import Vue from 'vue'
import VueRouter from 'vue-router'
import jwt from 'jsonwebtoken'
import store from '@/store'
import moment from 'dayjs'
const Index = () => import(/* webpackChunkName: 'index */ '../views/index.vue')
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: '',
          name: 'index',
          component: Index,
          meta: { requiresAuth: true }
        }
      ]
    },
 })
router.beforeEach((to, from, next) => { // 路由守卫
  // 每次进入路由之前先判断本地有没有localStorage
  // 取localStorage里面缓存的token信息 + 用户信息
  const token = localStorage.getItem('token')
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (token !== '' && token !== null) {
    // 方法一
    // const payload = jwt.decode(token)
    // 方法二
    const payload = JSON.parse(atob(token.split('.')[1]))
    // 当前时间在过期时间之前
    if (moment().isBefore(moment(payload.exp * 1000))) {
      //  本地有localStorage 就去缓存信息
      // 首页和用户的其他页面都能拿到用户的基本信息
      // 当用户的token过期 refresh token 一般token 8-24个小时过期
      store.commit('setToken', token)
      store.commit('setUserInfo', userInfo)
      store.commit('setIsLogin', true)
      if (!store.state.ws) {
        store.commit('initWebSocket', {})
      }
    } else {
      localStorage.clear()
    }
  }
  //  判断路由上有没有状态量 没有就直接跳过
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const isLogin = store.state.isLogin
    // 需要用户登录的页面进行区别
    if (isLogin) {
      // 已经登录的状态 进入需要进入的页面
      // 权限判断，meta原数据
      next()
    } else {
      // 未登录的状态
      next('/login')
    }
  } else {
    // 公共页面 不需要用户登录
    next()
  }
})
export default router

jwt是鉴权，moment是用来处理日期的插件，可通过npm或者yarn下载.
meta: { requiresAuth: true }是用来验证用户是否可访问该路由。