React Router v6 认证路由

Question

我知道这个问题已经被洗过多次了。然而，我无法从多个步骤中得到所有答案。

我确实理解将经过身份验证的路由包装到

Authorize

中的主要概念，以便能够在加载主路由组件之前检查用户是否经过身份验证。

我有一个关于路由器的问题。路由器在

loader

对象上公开属性

Route

。文档中指出，您应该使用此挂钩来获取已激活路线的相关数据。我的问题是，为什么我们不能用它来检查用户是否已经通过身份验证？如果在每次路由更改时执行此钩子，是否可以使用它来检查用户存储是否已授权并循环操作？

这是示例结构

const route = createBrowserRouter([
  {
    path: '',
    children: [
      {
        path: '',
        Component: LoginComopnent
      },
      {
        path: '',
        loader: {custom function here}
        children: [
          {
            path: 'home',
            Component: App
          }
          ...
        ]
      }
    ]
  }
]);

Answer 1

答案很简单：加载器函数和组件App会同时加载。但是，如果您使用加载程序来检查用户是否已通过身份验证，则您将希望加载程序在加载组件之前执行。 这是一个关于

beforeLoader

的建议，可能符合您的需求：Loader + Action Context（中间件）