我如何向用户展示特定的网页设计？

例如，如果用户是管理员，如何实现反应逻辑来显示不同的设计，或者如果用户有特权，我想要更改他的页面设计并使用node+Passport.js验证他的特权。我应该如何着手实施这一点。

---

解决方案

我进行此操作的一般方法是仅在身份验证后公开一层路由。类似于下面的内容。

const Routes = () => {
  return (
    <Switch>
      <Route path="/admin">
        <AdminView />
      </Route>
    </Switch>
  );
}

const ProtectedRoutes = () => {
  const [isAuthenticated, setAuthenticatedStatus] = useState(false);

  useEffect(() => {
    // business logic or api calls here
    setAuthenticatedStatus(true); // assuming valid user
  }, []); // keep necessary dependencies

  if(isAuthenticated) return <Routes />;

  return <UserNeedsPermission />;

}

有些人还使用组件级别的临时方法来实现这一点，这也是另一种可能的方法，但可能不需要，例如

const Admin = () => (<div>Admin View</div>);

const withAuthentication = (Comp) => (props) => {
  const [isAuthenticated, setAuthenticatedStatus] = useState(false);

  useEffect(() => {
    // business logic or api calls here
    setAuthenticatedStatus(true); // assuming valid user
  }, []); // keep necessary dependencies

  if(isAuthenticated) return <Comp {...props} />

  return <UserNeedsAuthentication />;

}

export default withAuthentication(Admin);