登录 在导航栏中注销

Question

我希望你还好。

我试图在用户登录时切换到在 Navabar 中注销，但是当我控制台日志时，我得到 isloggedin false，即使用户已登录并且令牌存储在 localstorage 中。

这是我的代码：

应用程序.js

 const App = () => { const [isLoggedIn, setLoggedIn] = useState(false) console.log(isLoggedIn) const handleLogin = token => { if (!token) return localStorage.setItem('token', token) setLoggedIn(true) } const handleLogout = () => () => { setLoggedIn(false) localStorage.clear() } return ( <div className="App"> <Router> <Navbar isLoggedIn={isLoggedIn} logout={handleLogout} /> <Switch> <Route exact path='/' component={props => ( <Login {...props} onLogin={handleLogin} /> )}></Route> <Route exact path="/signin" component={Signin}></Route> <Route exact path="/feed" component={Feed}></Route> <Route exact path="/withuser" component={Withuser}></Route> </Switch> </Router> </div> ) } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

导航栏.js：

 const TheNavbar = (props) => { console.log(props) return ( <div className="navbar"> <Navbar> <NavbarBrand> <NavLink id="logo" tag={Link} exact to="/"> <img src="/img/logounax.png" alt="image" style={{ width: 150 }} /> </NavLink> </NavbarBrand> <Nav> {props.isLoggedIn ? ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/feed"> Profile </NavLink> <NavLink className="link-pink" tag={Link} exact to="/" onClick={props.logout()}> Logout </NavLink> </Nav> ) : ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/"> Login </NavLink> <NavLink className="link-pink" tag={Link} exact to="/signin"> Signin </NavLink> </Nav> )} </Nav> </Navbar> </div> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

任何想法为什么会发生这种情况？

先感谢您。

（帖子已编辑）

Answer 1

我检查你的代码有一些问题。 您正在尝试检查handleLogin ，它只会在您单击handleLogin时进行检查。 如果用户刷新页面会发生什么。 如果令牌可用，它将理想地重定向到仪表板页面。 所以你必须添加useEffect来检查组件安装。 基本上你需要在你的App.js组件中添加它。 它只会检查组件何时第一次安装，如果令牌可用，它将设置它

useEffect(() => {
    if (localStorage.getItem("token")) {
      setLoggedIn(true);
    }
  }, []);

只需在您的文件中添加此代码段即可。 如果其他所有事情都正确，它会自动工作。

您仍然没有添加完整的代码;-)。 但我认为不需要。 这将解决您的问题

我修改了你的沙箱。 如果要test两个字段的功能类型test 。 这是演示