vue路由守卫导航beforeEach规定路由拦截

最近在做一个博客系统，采用的vuecli

后台管理系统需要token令牌来验证，而 / 根目录打算是用户访问的前台。

不同路由都得判断是否需要token令牌来验证。

一、判断指定路由是否需要token令牌验证

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

Vue.use(VueRouter)

const routes = [
  // 后台首页
  {
    path: '/admin/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      title: 'egocms - 后台首页',
      requireAuth: true
    },
    children: [
      // 修改密码
      {
        path: 'changepassword',
        component: () => import('../views/ChangePassword.vue'),
        meta: {
          title: 'egocms - 修改密码',
          requireAuth: true
        }
      }
    ]
  }
]

设置requireAuth: true则代表需要token令牌来验证。

在vuex容器中去到token令牌

// 路由全局守卫
router.beforeEach((to, from, next) => {
  // 动态设置标题
  if (to.meta.title) {
    document.title = to.meta.title
  }
  const token = store.state.token
  // 当前页面是否需要权限
  if (to.meta.requireAuth) {
    if (token) {
      next()
    } else {
      next('/admin')
    }
  }
  next()
})

先判断是否需要权限，在判断token值

如果看不懂可以看看这个，非常详细

https://blog.csdn.net/heshuaicsdn/article/details/88020796