页面权限控制Vue 动态添加路由及生成菜单 这是我写过的一篇文章，思路：

代码示例：

routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
   roles: ['admin', 'user']
  },
  component: () => import('../components/Login.vue')
 },
 {
  path: 'home',
  name: 'home',
  meta: {
   roles: ['admin']
  },
  component: () => 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}`)
  }
 }
})爒ue轻量级后台管理系统基础模板 项目里找到总结

以上所述是小编给大家介绍的Vue 页面权限控制和登陆验证功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！