v6路由权限验证踩坑：自定义Hook实现路由守卫经验

在React Router v6升级过程中，路由权限验证成为了一个重要议题。v6版本移除了<Route>组件的component和render属性，改用element属性来渲染组件，这使得传统的路由守卫实现方式需要重新思考。

问题场景

在项目中我们使用自定义Hook实现路由权限验证，但遇到了以下问题：

1. useNavigate hook在组件未挂载时无法正确跳转
2. 权限验证逻辑与组件渲染逻辑耦合导致性能问题
3. 多层嵌套路由的权限控制复杂度增加

解决方案

我们采用自定义Hook实现路由守卫，代码如下：

// hooks/useAuth.js
import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/auth';

export const useAuth = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, permissions } = useAuthStore();
  
  useEffect(() => {
    // 检查用户是否登录
    if (!user) {
      navigate('/login', { 
        replace: true,
        state: { from: location.pathname }
      });
      return;
    }
    
    // 检查权限
    const requiredPermissions = ['read']; // 示例权限
    const hasPermission = permissions.some(p => requiredPermissions.includes(p));
    
    if (!hasPermission) {
      navigate('/unauthorized', { replace: true });
    }
  }, [user, permissions, location.pathname]);
};

// 组件中使用
const ProtectedRoute = () => {
  useAuth();
  return <div>受保护内容</div>;
};

关键点说明

1. 使用useEffect确保在组件挂载后执行验证逻辑
2. 通过location.pathname获取当前路由路径
3. 利用replace: true避免用户返回时重复验证
4. 通过store管理全局认证状态

可复现步骤

1. 创建一个需要登录的页面
2. 不登录直接访问该页面
3. 观察是否正确跳转到登录页

在v6中，路由守卫的实现更加灵活，但需要开发者更深入理解React的生命周期和路由机制。