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

【问题标题】：How do I show a specific web design to a user?如何向用户展示特定的网页设计？
【发布时间】：2021-08-05 06:39:36
【问题描述】：

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

【问题讨论】：

标签： javascript node.js reactjs passport.js

【解决方案1】：

我这样做的一般方法是仅在身份验证后公开一层路由。如下所示。

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 />;

}

有些人也在组件级别使用 HoC 方法来解决这个问题，这也是另一种可能的方式，但可能不需要它，例如

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);

【讨论】：