我希望你没事。
当用户登录时,我试图切换到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>
任何想法为什么会这样?
谢谢。
(帖子已编辑)
答案 0 :(得分:1)
我检查您的代码存在一些问题。您正在尝试对handleLogin
进行检查,该检查仅在您单击handleLogin
时才会检查。如果用户刷新页面会发生什么。理想情况下,如果令牌可用,它将重定向到仪表板页面。因此,您必须添加useEffect
来检查组件安装。基本上,您需要在App.js
组件中添加它。它将仅检查组件何时首次安装,如果令牌可用,它将对其进行设置
useEffect(() => {
if (localStorage.getItem("token")) {
setLoggedIn(true);
}
}, []);
只需在您的文件中添加此代码段即可。如果其他所有条件都正确,它将自动运行。
您仍然没有添加完整的代码;-)。但是我认为这不是必需的。这将解决您的问题
我修改了您的沙箱。如果要测试功能性,请为两个字段输入test
。这是demo