通过 React js 中的 Role 隐藏导航栏

Question

如何在 React js 中隐藏角色 ('Admin' & 'user') 之间的导航栏
例子

  const [currentUser, setCurrentUser] = useState("");
  const [role, setRole] = useState("");
  let navigation = [];

  useEffect(async () => {
    // get user from Local storage 
    const user = authService.getCurrentUser();
    if (!user) return;
    setCurrentUser(user);
    // get Role from Database 
    currentUser && setRole(authService.getRoleByUserId(currentUser.id));

    console.log(currentUser);
  }, [currentUser.id]);

  if (currentUser && role === "Admin") {
    navigation = [
      { name: "Home", href: "/Home", action: false, icon: false },
      { name: "Vendors", href: "/vendors", action: false, icon: false },
      { name: "Pricing", href: "/pricing", action: false, icon: false },
      { name: "Profile", href: "/profile", action: false, icon: false },
      { name: "Sign Out", href: "/", action: false, icon: false },
      { name: "", href: "/Cart", action: false, icon: true },
    ];
  } else {
    navigation = [
      { name: "Home", href: "/Home", action: false, icon: false },
      { name: "Pricing", href: "/pricing", action: false, icon: false },
      { name: "Sign In", href: "/login", action: false, icon: false },
      { name: "", href: "/Cart", action: false, icon: true },
    ];
  }

  return (
   ...

      

我该怎么做？欢迎提出建议。

Answer 1

您不应该在 useEffect 中使用 currentUser，而应使用 user。

尝试：

// get user from Local storage
const user = authService.getCurrentUser();
if (!user) return;
setCurrentUser(user);
// get Role from Database
user && setRole(authService.getRoleByUserId(currentUser.id));