Remix嵌套路由身份验证与Loader复用问题咨询

你的疑问解答 #

• 是否需要在b和c的loader中做身份校验？
  必须要。Remix在同层级路由切换（比如从/a/b跳转到/a/c）时，只会触发当前变化的路由段的loader，父路由a的loader不会重新执行。如果用户在/a/b页面时身份过期，直接导航到/a/c就会绕过a的验证，所以b和c的loader里必须单独做校验。

• 在c的loader中能安全假设用户已认证吗？
  绝对不能。同层级导航不会触发父路由的loader，用户的身份可能在会话期间过期，或者通过其他方式绕过了父路由的验证逻辑，所以任何需要保护的路由都不能默认认为用户已认证。

Remix 标准做法（避免重复代码） #

不想每个路由都写一遍isAuthenticated？这两种方案可以解决：

1. 封装可复用的验证函数 #

把身份验证逻辑抽成独立函数，在所有需要验证的loader里调用即可：

// app/utils/auth.ts
export async function requireUser(request: Request) {
  const user = await authenticator.isAuthenticated(request, {
    failureRedirect: "/login",
  });
  if (!user) {
    throw redirect("/login");
  }
  return user;
}

然后在a、b、c的loader里直接用：

// app/routes/a.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request);
  // 这里写/a页面的加载逻辑
  return json({ user });
}

// app/routes/a/b.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const user = await requireUser(request);
  // 这里写/a/b页面的加载逻辑
  return json({ user });
}

2. 用路由组统一做父级验证 #

把所有需要验证的路由放到一个路由组（比如(protected)）里，然后在组的根路由中做全局验证：

root/
└── (protected)/
    ├── a/
    │   ├── b
    │   └── c
    └── _layout.tsx

在(protected)/_layout.tsx的loader里添加验证：

// app/routes/(protected)/_layout.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  await authenticator.isAuthenticated(request, {
    failureRedirect: "/login",
  });
  return null;
}

这样所有(protected)下的路由，不管是直接访问还是同层级切换，都会先触发这个父路由的loader完成验证，不用每个路由都重复写校验逻辑。

重要提醒 #

• Remix的loader执行规则：只有当路由路径的前缀部分发生变化时，父路由loader才会重新执行。同层级路由切换只会触发当前路由段的loader，父级不会重新跑。
• 身份验证必须在服务端的loader里做，前端路由守卫完全不可靠，很容易被绕过。

内容的提问来源于stack exchange，提问作者AlexHv