Vue Router 实现权限控制、解决路由死循环、动态删除路由

Vue Router 实现权限控制、解决路由死循环、动态删除路由

利用路由的元数据实现权限控制,如下所示，mate属性里面roles定义角色

{
    path: '/profile',
    component: Layout,
    redirect: '/profile/index',
    hidden: true,
    meta: { title: '账号信息', icon: 'table', roles: [0, 1, 2] },
    children: [
      {
        path: 'index',
        component: () => import('@/views/profile/index'),
        name: 'Profile',
        meta: { title: 'Profile', icon: 'user', noCache: true, roles: [0, 1, 2] }
      }
    ]
  }

在main.js 里设置路由守卫

// 导入路由器
import router, { constantRoutes } from './router'

// 权限控制
router.beforeEach((to, from, next) => {
  const role = store.getters.role
  const dept = store.getters.dept
  console.log('constantRoutes', constantRoutes)
  console.log('用户的角色', role)
  console.log('用户的部门', dept)
  // 如果角色为空的话，表示调用了登出方法
  if (role === '') {
    console.log('用户角色为空,跳转到登录界面')
    // 下面这样写解决 能避免跳转到登录时出现死循环
    if (to.path === '/login') {
      next()
    } else {
      next({ path: '/login' }) // 放行
    }
  } else if (to.meta.roles.includes(role)) {
    if (dept === 9) {
      // 广告组，路由到广告组界面
      if (role === 0) {
        console.log('普通用户')
        // 广告组中的普通用户，删除广告内容组的路由
        // 遍历搜索需要删除路由的位置
        const index = constantRoutes.findIndex(item => {
          if (item.path === '/adContentGroup') {
            return true
          }
        })
        // 删除路由
        console.log(index)
        if (index !== -1) {
          constantRoutes.splice(index, 1)
        }
      }
      // 解决路由死循环
      if (to.path === '/adGroup/productInformation') {
        next()
      } else {
        next({ path: '/adGroup' })
      }
    } else if (dept === 10) {
      // 广告内容组，路由到广告内容组界面
      if (to.path === '/adContentGroup') {
        next()
      } else {
        next({ path: '/adContentGroup' })
      }
    } else {
      next() // 放行
    }

  } else {
    next({ path: '/401' }) // 跳到401页面
  }
})