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

问题描述

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

constructor(){this.router = null;
}

router只有在后续的一个守卫组件中调用createHashRouter才会设置。
而控制跳转代码如下：

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跳转：

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，后面有时间再整理一下吧。