面试题：Vue导航守卫如何在嵌套路由中灵活应用以实现复杂权限控制

Question

假设你有一个多层嵌套的路由结构，不同层级的路由有不同的权限要求，如某些子路由只有特定角色的用户才能访问。请阐述如何运用Vue Router的导航守卫，包括全局守卫、路由独享守卫和组件内守卫，来实现这种复杂的权限控制逻辑，并给出关键代码示例。

Answer 1

1. 全局守卫

全局守卫可以在路由切换的全局范围内进行权限控制。beforeEach 守卫会在每次路由切换前被调用。

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  const userRole = store.getters.userRole
  if (to.matched.some(record => record.meta.requiresRole)) {
    if (!userRole) {
      next({ name: 'Login' })
    } else {
      const requiredRole = to.meta.requiresRole
      if (Array.isArray(requiredRole) && requiredRole.includes(userRole)) {
        next()
      } else if (userRole === requiredRole) {
        next()
      } else {
        next({ name: 'Forbidden' })
      }
    }
  } else {
    next()
  }
})

在上述代码中，我们通过 to.matched.some(record => record.meta.requiresRole) 判断目标路由是否需要特定角色权限。如果需要，检查用户是否登录（即是否有 userRole），若未登录则重定向到登录页面。若已登录，再判断用户角色是否符合目标路由所需角色，不符合则重定向到禁止访问页面。

2. 路由独享守卫

路由独享守卫是直接定义在路由配置中的守卫。

const routes = [
  {
    path: '/admin/dashboard',
    name: 'AdminDashboard',
    component: AdminDashboard,
    beforeEnter: (to, from, next) => {
      const userRole = store.getters.userRole
      if (userRole === 'admin') {
        next()
      } else {
        next({ name: 'Forbidden' })
      }
    },
    meta: {
      requiresRole: 'admin'
    }
  }
]

这里在 beforeEnter 中判断用户角色是否为 admin，如果是则允许进入，否则重定向到禁止访问页面。

3. 组件内守卫

组件内守卫是定义在组件内部的守卫。

export default {
  name: 'SomeRestrictedComponent',
  beforeRouteEnter(to, from, next) {
    const userRole = store.getters.userRole
    if (to.meta.requiresRole === 'editor' && userRole === 'editor') {
      next()
    } else {
      next({ name: 'Forbidden' })
    }
  }
}

在组件的 beforeRouteEnter 守卫中，同样根据用户角色和目标路由所需角色进行权限判断，决定是否允许进入该组件。

在使用这些导航守卫时，关键是在路由的 meta 字段中定义权限相关信息（如 requiresRole），然后在各个守卫中根据这些信息和用户的实际角色进行逻辑判断和处理。