react 修复403页面无法在首页跳转问题

lvchaoq2025-10-11 22:16

文章目录

问题描述
解决方案

问题描述

当用户在应用首页即触发权限错误时，系统无法正确跳转到403页面，而是正常显示首页，而点击任意导航栏时才能跳转403界面。通过分析，发现问题的在于：在应用初始化阶段，路由实例尚未完全创建，但权限验证已经开始执行，导致403跳转时 router 对象为 null 。

也就是说，原AccessStore代码初始化如下：

javascript 复制代码

constructor(){
	this.router = null;
}

router只有在后续的一个守卫组件中调用createHashRouter才会设置。

而控制跳转代码如下：

javascript 复制代码

if (status === 403) {
    // 跳转到 403 页面
    accessStore.getRouter()?.navigate('/403');
    return false;
 }

这就导致一个问题：

应用的权限验证流程在 accessStore的一个函数中进行，这个函数发生在组件挂载早期。而完整的路由配置依赖于权限表的加载。当权限验证过程中出现403错误时，尝试通过 accessStore.getRouter()?.navigate('/403') 跳转，但此时 router 可能尚未初始化。

也就是说如果在 router 设置之前就发生了403错误， accessStore.getRouter() 会返回 null ，导致 navigate 方法无法调用。

解决方案

AccessStore 构造函数中提前初始化一个最小化的路由实例，确保即使在应用早期也能处理403跳转：

javascript 复制代码

constructor() {
    this.router = null;
    // 尝试提前初始化一个基本的router实例，避免在应用早期出现403错误时无法跳转
    try {
      // 创建一个最小化的路由配置
      const minimalRoutes: RouteObject[] = [
        {
          path: '/403',
          element: <DefaultForbiddenView />,
        },
      ];
      this.router = createHashRouter(minimalRoutes);
    } catch (error) {
      console.warn('Failed to initialize minimal router during AccessStore construction:', error);
    }
  }

也就是在 AccessStore 实例创建时（应用启动的最早阶段之一）就初始化一个只包含403页面的路由。这个最小化路由确保即使在完整路由配置加载前，系统也能处理权限错误跳转。

感觉说的乱七八糟的......总之是今天临时提出来的一个bug，后面有时间再整理一下吧。