Vue 页面权限控制和登陆验证功能的实例代码

routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
   roles: ['admin', 'user']
  },
  ponent: () => import('../ponents/Login.vue')
 },
 {
  path: 'home',
  name: 'home',
  meta: {
   roles: ['admin']
  },
  ponent: () => import('../views/Home.vue')
 },
]

// 假设角色有两种admin 和 user
// 这里是从后台获取的用户角色
const role = 'user'
// 在进入一个页面前会触发 router.beforeEach 事件
router.beforeEach((to, from, next) => {
 if (to.meta.roles.includes(role)) {
  next()
 } else {
  next({path: '/404'})
 }
})

router.beforeEach((to, from, next) => {
 // 如果有token 说明该用户已登陆
 if (localStorage.getItem('token')) {
  // 在已登陆的情况下访问登陆页会重定向到首页
  if (to.path === '/login') {
   next({path: '/'})
  } else {
   next({path: to.path || '/'})
  }
 } else {
  // 没有登陆则访问任何页面都重定向到登陆页
  if (to.path === '/login') {
   next()
  } else {
   next(`/login?redirect=${to.path}`)
  }
 }
})