如何调用API来检查用户在react中渲染的每个组件上是否有效？

Question

我有一个用户身份验证应用程序，一旦用户登录，我会将其数据保存在 redux 存储中，并使用它通过 redux 管理身份验证状态。但这从未提供实时数据。假设用户在会话中被阻止。除非他访问服务器中受保护的路由，否则无法选择将他注销。因此，我创建了一个服装钩子来对服务器进行 API 调用来验证用户。问题是我创建了一个受保护的路由组件并将所有路由包装在该组件中。我期望当他从一个组件切换到另一个组件时进行 API 调用。但受保护的路由仍然是父路由，并且那里没有发生状态更改。因此，API 调用并不是每次访问组件时都会进行。我可以做到这一点的一种方法是在用户访问的每个组件中调用此挂钩。但这不是一个有效的方法。当子组件发生更改时，如何调用 API？或者还有其他方法可以获取此功能吗？

这是我的路线结构

<Route element={<ProtectedRoutes />}>
    <Route element={<DashboardHeader />}>
        <Route path="dashboard" element={<Dashboard />}></Route>
        <Route path="classroom/:classroom_id" element={<ClassroomLayout />}>
            <Route
                path="summary"
                element={<ClassroomSummary />}
                errorElement={<Error />} />
        </Route>
    </Route>
</Route>

//Protected Route were the hook useAuth call is made. Hook is working perfeclty fine!
const ProtectedRoutes: React.FC<DashboardProps> = () => {
    const role = useRole();
    const navigate = useNavigate()
    const { loading, user, error } = useAuth(role);

    if (loading) return null
    if (error) navigate('/');

    return user ? <Outlet /> : <Navigate to='/' />
}

Answer 1

创建一个单独的布局路由组件，用于侦听位置更改并每次运行效果。

示例：

import {
  Outlet,
  useLocation,
  useNavigate,
} from "react-router-dom";

const AuthCheckLayout = () => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // location path changed, run side-effect to check
    // user authentication status
    
    if (!isAuthenticated) {
      // handle any App auth state cleanup and navigate home/login
      ...
      navigate("/login", { replace: true, state: { from: location } });
    }
  }, [location]);

  return <Outlet />;
};

将您想要跟踪用户身份验证状态的所有路由封装在此

AuthCheckLayout

布局路由组件中，这允许

ProtectedRoutes

布局路由组件保护特定的路由集。

示例：

<Routes>
  {/* Check user auth status on these routes */}
  <Route element={<AuthCheckLayout />}>
    ...

    <Route element={<DashboardHeader />}>
      <Route path="dashboard" element={<Dashboard />} />

      {/* Protect classroom routes */}
      <Route element={<ProtectedRoutes />}>
        <Route path="classroom/:classroom_id" element={<ClassroomLayout />}>
          <Route
            path="summary"
            element={<ClassroomSummary />}
            errorElement={<Error />}
          />
        </Route>
      </Route>

      ...

    </Route>

    ...

  </Route>
</Routes>