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

Question

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

Answer 1

我的一般方法是只公开一层路由 post 身份验证。如下所示。

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

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

How do I show a specific web design to a user?

javascript

node.js

reactjs

passport.js