Files
bq_react/doc/项目文档/基础应用/路由(routes).md

1.8 KiB
Raw Permalink Blame History

路由

目录

功能定义

路由把 URL 指到功能模块页面,并用布局策略决定未登录或已登录时能否进入。

入口 文件 定义
路由表 src/app/routes.ts 声明页面路径和所属布局
decideRoutePolicy src/app/routes/layouts/decide_route_policy.ts 根据 require-auth 或 require-guest 返回 allowed 或 denied
AuthLayout src/app/routes/layouts/auth.layout.tsx 已登录区域。未登录时拒绝
GuestLayout src/app/routes/layouts/guest.layout.tsx 访客区域。已登录时拒绝

路由表:

路径 布局 页面
/ app_shell home
/security guest security
/profile auth security 的资料页
/projects/remote auth project
/projects/local auth project
/editor/:projectId auth editor

使用示例

已登录布局把 hasSession() 交给策略。文件:src/app/routes/layouts/auth.layout.tsx。

const policy = decideRoutePolicy('require-auth', hasSession(), url.pathname, url.search);
if (policy.status === 'denied') throw redirect(policy.redirect.to);

时序

访问策略

sequenceDiagram
  participant AuthLayout
  participant decideRoutePolicy

  AuthLayout->>decideRoutePolicy: decideRoutePolicy(require-auth, authenticated, pathname, search)
  decideRoutePolicy-->>AuthLayout: denied

require-auth 且未登录时,结果是 denied,redirect.to 指向 /security,并带上当前路径。require-guest 且已登录时,redirect.to 为 /。其余情况为 allowed。GuestLayout 使用 require-guest,步骤相同。