时间戳

首页 > 解决方案 > 为登录用户显示不同的导航栏

javascript - 为登录用户显示不同的导航栏

问题描述

我已经在我的应用程序中创建了登录/注册，现在我想根据用户登录显示不同的导航栏。我不为这个项目使用 redux。

在全局的 App 组件中，我创建了我想传递给孩子的状态，然后基于它，显示不同的数据，所以我创建了这样的东西：

function App() {
  const [loginStatus, setLoginStatus] = useState();

  useEffect(() => {
    if(!loginStatus) {
      axios.get("http://localhost:5000/api/users/isUserAuth", {
        headers: {
          "x-access-token": localStorage.getItem("token")
        }
      }).then((response) => {
        console.log(response);
        setLoginStatus(true);
      })
    }}, [])

然后在我的导航栏中我创建了这样的东西：

      <NavItem style={{display: loginStatus ? "block" : "none"}}>

这可行，但它会导致 loginStatus 在每次页面刷新时加载，每条路线都会被加载，所以当我在用户登录时转到不同的页面时，它会在 NavItem 出现之前导致 0.5 秒的延迟，因为它会在每次刷新时向后端发出请求。

我如何存储用户登录的信息，这样就不必在每个页面上进行 API 调用？

标签： javascriptnode.jsreactjsauthenticationjwt

解决方案

我认为您可以使用localStorage来存储用户登录信息。

推荐阅读