前端路由设置

构建一个健壮的前端路由系统，不仅仅是把页面配置进去，更要考虑层级结构、权限控制、用户体验（重定向）以及异常兜底（404）。

一、路由分类（层级结构）

1. 第一层（顶层）

• 区分“无需登录页面”（如登录页）和“需登录业务页”（如后台主界面）
• 示例配置：

  {path:"/login",component:"LoginPage"},

2. 第二层（业务层）

• 加载全局 Layout（侧边栏、Header），并进行权限校验
• 示例配置：

  {path:"/",component:"@/widgets/MainLayout",routes:[{path:"/",redirect:"/dashboard"},{path:"/dashboard",component:"DashboardPage",wrappers:["@/wrappers/auth"],},// 其他业务页面...]}

• 路由守卫（auth Wrapper）实现：

  import{Navigate,Outlet,useLocation}from"umi";import{isUserLoggedIn}from"@/shared/utils/auth";/** * 路由守卫（第一道防线） * 拦截没有 Token 的用户，并重定向到登录页，传递 reason=no_auth */exportdefault()=>{constlocation=useLocation();constisLogin=isUserLoggedIn();if(isLogin){return<Outlet/>;}else{// 构造目标 URL// 1. redirect: 登录成功后要跳回的地方// 2. reason=no_auth: 告诉登录页，这是因为没登录被拦截过来的constcurrentPath=encodeURIComponent(location.pathname+location.search);consttargetUrl=`/login?redirect=${currentPath}&reason=no_auth`;return<Navigate to={targetUrl}replace/>;}};

3. 第三层（功能层）

• 具体的业务页面、重定向规则、内部 404
• 示例配置：

  {path:"*",component:"404"},

二、路由书写顺序

• 路由匹配是“从上到下”的 (Order Matters)，路由器会像 switch 语句一样，从第一行开始找
• 错误做法：把 path: ‘/’ 放在 path: ‘/login’ 前面，且没有加 exact
• 后果：所有页面都会匹配到 /，导致登录页可能渲染不出来或者被 Layout 包裹

三、权限校验

• 使用 Umi Wrappers (高阶组件)
• 配置方式：在路由配置中添加wrappers: ['@/wrappers/auth']
• 执行逻辑：路由匹配到该层级时，先执行 Wrapper。如果 Wrapper 判断未登录，直接跳转，主 Layout 连加载的机会都没有，彻底杜绝空白或闪屏。