其他组件使用localstorage登录/注销时如何在AppBar中显示和隐藏登录和注销按钮

Posted 2023-02-21

【中文标题】其他组件使用localstorage登录/注销时如何在AppBar中显示和隐藏登录和注销按钮

【英文标题】：How to show and hide login and logout buttons in AppBar when other component logs in / out using localstorage

【发布时间】：2021-08-28 09:46:40

【问题描述】：

我有一个 App 组件，它呈现具有登录和注销按钮的 MyAppBar 组件。 App 还呈现 Login 表单组件，该组件具有一个按钮，可将用户信息添加到本地存储执行虚拟成功登录功能。登录按钮应该显示登录表单，但是为简单起见，我省略了此功能。注销按钮清除执行虚拟成功注销功能的本地存储。这两个功能都可以工作：

Login 组件中的按钮能够为本地存储增加价值 MyAppBar 组件中的注销按钮可以清除本地存储

疑问：

Q1.当Login 组件中的按钮为本地存储增加价值时，如何隐藏登录按钮并显示注销按钮？Q2.如何当 MyAppBar 组件中的 Logout 按钮清除 localstorage 时，我隐藏 Loout 按钮并显示 Login 按钮？Q3.“最重要的是”，如何在不重新渲染 AppBar 的情况下同时执行这两项操作？

MyAppBar.js

import  AppBar, Button, Toolbar  from "@material-ui/core";
import "./styles.css";

export default function MyAppBar() 
  const logout = () => 
    localStorage.removeItem("user");
  ;
  return (
    <AppBar>
      <Toolbar>
        <Button color="inherit">
          Login
        </Button>
        <Button onClick=logout color="inherit">
          Logout
        </Button>
      </Toolbar>
    </AppBar>
  );

Login.js

import  Button  from "@material-ui/core";

export default function Login() 
  const login = () => 
    localStorage.setItem("user", JSON.stringify( name: "rnj" ));
  ;
  return (
    <>
      <Button variant="contained" color="inherit" onClick=login>
        CREATE USER IN LOCALSTORAGE
      </Button>
    </>
  );

检查this代码框中的整个代码。您可以通过点击this 链接在新的浏览器窗口中运行代码框，以便您可以使用 DevTools 检查更改的本地存储。

【参考方案1】：

您可以使用 useState 和 useEffect 来执行此操作。 基本上你可以像这样替换你的登录名和 MyAppBar Code。

Login.js

import  Button  from "@material-ui/core";

export default function Login() 
  const login = () => 
    localStorage.setItem("user", JSON.stringify( name: "rnj" ));
    window.location.reload();
  ;
  return (
    <>
      <Button variant="contained" color="inherit" onClick=login>
        CREATE USER IN LOCALSTORAGE
      </Button>
    </>
  );

MyAppBar.js

import  AppBar, Button, Toolbar  from "@material-ui/core";
import  useEffect, useState  from "react";
import "./styles.css";

export default function MyAppBar() 
  const [isLogged, setisLogged] = useState(false);

  useEffect(() => 
    checkStorage();
    return () => ;
  , [isLogged]);
  function checkStorage() 
    if (localStorage.getItem("user")) 
      setisLogged(true);
     else 
      setisLogged(false);
    
  
  const logout = () => 
    localStorage.removeItem("user");
    setisLogged(false);
  ;
  return (
    <AppBar>
      <Toolbar>
        !isLogged ? (
          <Button color="inherit">Login</Button>
        ) : (
          <Button onClick=logout color="inherit">
            Logout
          </Button>
        )
      </Toolbar>
    </AppBar>
  );

仅出于演示目的，当您创建用户时，我已重新加载页面，但我更希望您将已登录状态作为道具传递，然后更改 Login.js 中的状态，这样您就可以隐藏/显示按钮而无需重新加载。 我希望这对你有用。 谢谢