面试题：Vue Router路由参数与查询字符串在导航守卫中的处理

Question

假设在Vue Router中有一个全局前置守卫，当用户访问带有特定路由参数和查询字符串的页面时，需要进行权限验证。例如，当访问 `/product/:productId?category=electronics` 时，若用户没有电子产品类的访问权限则重定向到登录页面。请编写该全局前置守卫的代码实现，并说明为什么这样处理。

Answer 1

在Vue Router中，可以通过router.beforeEach来设置全局前置守卫。以下是代码实现：

import router from './router'
import { getCurrentUserPermissions } from './utils/auth' // 假设这是获取用户权限的函数

router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/product') && to.query.category === 'electronics') {
    const userPermissions = getCurrentUserPermissions()
    if (!userPermissions.includes('electronics')) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

为什么这样处理：

1. 路径匹配：使用to.path.startsWith('/product')确保路径是以/product开头，再结合to.query.category === 'electronics'来匹配特定的查询字符串，这样就能精准定位到需要进行权限验证的路由。
2. 权限获取与验证：调用getCurrentUserPermissions函数获取用户当前的权限，然后检查权限列表中是否包含electronics权限。
3. 重定向处理：如果用户没有相应权限，使用next('/login')将用户重定向到登录页面；如果有权限，则使用next()继续导航。对于其他不匹配的路由，则直接使用next()让用户正常访问。