权限菜单路由的挂载

权限菜单路由的挂载一般有以下几个步骤：

1. 在路由配置中定义权限菜单路由，例如：

{
  path: '/user',
  component: UserLayout,
  redirect: '/user/login',
  children: [
    {
      path: '/user/login',
      name: 'login',
      component: UserLogin
    },
    {
      path: '/user/register',
      name: 'register',
      component: UserRegister
    }
  ]
}

2. 在权限系统中配置每个菜单对应的权限，例如：

{
  name: 'user',
  permissions: [
    {
      name: 'login',
      action: ['view', 'edit']
    },
    {
      name: 'register',
      action: ['view']
    }
  ]
}

3. 在应用启动时，根据当前用户的权限信息动态生成可访问的路由表，例如：

const asyncRoutes = filterAsyncRoutes(permissionList)

function filterAsyncRoutes(routes) {
  return routes.filter(route => {
    if (route.component) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRoutes(route.children)
      }
      return true
    }
    return false
  })
}

const router = new VueRouter({
  routes: constantRoutes.concat(asyncRoutes)
})

其中，`permissionList` 是当前用户的权限列表，`filterAsyncRoutes` 函数用于过滤掉未授权的菜单路由，最后通过 `constantRoutes` 和 `asyncRoutes` 合并生成完整的路由表，并挂载到 VueRouter 上。

4. 在需要进行权限控制的组件中使用 `Vue Router` 的导航守卫进行权限校验，例如：

router.beforeEach(async (to, from, next) => {
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/user/login') {
      next({ path: '/' })
    } else {
      const hasPermissions = await store.dispatch('user/getPermissions')
      if (hasPermissions) {
        next()
      } else {
        next({ path: '/403' })
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/user/login')
    }
  }
})

其中，在 `beforeEach` 导航守卫中，通过 `getPermissions` 方法获取当前用户的权限信息，如果有权限则允许访问，否则跳转到 403 页面或者返回登录页。