我的所有页面上都有一个导航栏组件,但注销功能存在问题。注销功能仅在我刷新页面时有效。我该如何解决这个问题?提前致谢!
const Navbar = ({setAuth}) => {
const logout = async (e) => {
e.preventDefault();
try {
localStorage.clear();
localStorage.removeItem("token");
setAuth(false);
toast.error("Logout successfully");
} catch (err) {
console.error(err.message);
}
};
const userLink = (
<>
<li><Link className = "link" to="./Register" >Register </Link></li>
<li><Link className = "link" to="./Login" >Login </Link></li>
</>
);
const loginLink =(
<>
<li><Link className = "link" to="/dashboard">Dashboard</Link></li>
<li><Link className = "link" onClick={logout} to="/">Logout</Link></li>
</>
)
return(
<Fragment>
<nav>
<ul className = {renderClassses()}>
<li><Link className = "link" to="/">Home </Link></li>
<li><Link className = "link" to="./About">About</Link></li>
<li><Link className = "link" to="./Contact">Contact </Link></li>
{!localStorage.getItem('token') ? userLink : loginLink}
</ul>
<div onClick= {handleNavLinksToggle} className="hamburger-toggle">
<i className="fas fa-bars fa-lg"></i>
</div>
</nav>
</Fragment>
)
}
export default Navbar;
{setAuth} 函数位于我的 App.js 中。用于验证我的登录用户。
function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const setAuth = (boolean) => {
setIsAuthenticated(boolean);
};
toast.configure();
const checkAuthenticated = async () => {
try {
const res = await fetch("http://localhost:5000/authentication/verify", {
method: "POST",
headers: { jwt_token: localStorage.token },
});
const parseRes = await res.json();
parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
checkAuthenticated();
if (localStorage.getItem("token")) {
setIsAuthenticated(true);
}
}, []);
还注意到当我在导航栏中单击注销时出现此错误