ReactJS 多个用户角色的私有路由不起作用

Question

我已经挣扎了一段时间，但仍然不知道如何让它发挥作用。我有一个私有路由，应该根据用户角色在客户端和管理员之间切换。

问题：如果用户角色是客户端，它将显示，如果是管理员，它将不会显示，但将从客户端读取重定向（客户端是添加的第一个私有路由，但我不知道如何使它们在之间切换）

登录时仅显示客户端。当用户角色是管理员时，我希望能够以管理员身份登录。客户就是客户，等等

一些帮助将不胜感激！

应用程序.jsx

function App() {

  const NewComp = NewHOC(AppRoutes);

  //CHECK FOR USER LOGGED IN
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(clientDetails);
  const handleLogout = () => setUser(null);

  return (
   <Aux>
      {user ? (
            <button onClick={handleLogout}>Sign Out</button>
        ) : (
            <button onClick={handleLogin}>Sign In</button>
      )}
      <Routes>
        {/* CLIENT ROUTE */}
        <Route path='/*' element={
        <ProtectedRoute redirectPath='/home'
                isAllowed={!!user && user.permissions.includes('star') && user.roles.includes('client')}
        >
          <div>The Client</div>
        </ProtectedRoute>} />

        {/* ADMIN ROUTE */}
        <Route path='/*' element={
        <ProtectedRoute redirectPath='/non-admin'
                isAllowed={!!user && user.roles.includes('admin')}
        >
          <div>The Admin</div>
        </ProtectedRoute>} />
        <Route path={"*"} element={ <Navigate replace to={ "/" }/> }/>
      </Routes>
  </Aux>
  )
}

ProtectedRoute.jsx

const ProtectedRoute = ({
    isAllowed,
    redirectPath = '/',
    children,
  }) => {
    if (!isAllowed) {
      return <Navigate to={redirectPath} replace />;
    }
  
    return children ? children : <Outlet />;
  };

客户详情

var clientDetails = {
    id: '1',
    name: 'Vio',
    permissions: ['star'],
    roles: ['client'],
}

Answer 1

这里的问题是您在

"/"

上渲染了两条路线，因此只有第一条路线被匹配和渲染。

ProtectedRoute

应呈现为 布局路线，以便它包装实际具有路径的嵌套路线，例如实际路由本身上的受保护内容具有适当的路由路径。

示例：

function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(clientDetails);
  const handleLogout = () => setUser(null);

  return (
    <Aux>
      {user ? (
        <button onClick={handleLogout}>Sign Out</button>
      ) : (
        <button onClick={handleLogin}>Sign In</button>
      )}
      <Routes>
        <Route path="/" elemnent={<div>The safe home page</div>} />

        {/* CLIENT ROUTE */}
        <Route
          element={(
            <ProtectedRoute
              redirectPath="/" // <-- redirect to safe unprotected or non-client route
              isAllowed={!!user &&
                user.permissions.includes('star') &&
                user.roles.includes('client')
              }
            />
          )}
        >
          <Route path="client" element={<div>The Client</div>} />
          ... other client routes
        </Route>

        {/* ADMIN ROUTE */}
        <Route
          element={(
            <ProtectedRoute
              redirectPath="/" // <-- redirect to safe unprotected or non-admin route
              isAllowed={!!user &&
                user.roles.includes('admin')
              }
            />
          )}
        >
          <Route path="admin" element={<div>The Admin</div>} />
          ... other admin routes
        </Route>

        <Route path="*" element={<Navigate replace to="/" /> } />
      </Routes>
    </Aux>
  )
}