Question

我希望你没事。

当用户登录时，我试图切换到Navabar登出，但是当我进行控制台登录时，即使用户登录并且令牌存储在本地存储中，我也会将isloggedin设置为false。

这是我的代码：

App.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>

Navbar.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。这是demo

导航栏中的登录注销

1 个答案: