需要刷新页面才能注销

时间:2021-05-20 05:17:30

标签: reactjs react-hooks

我的所有页面上都有一个导航栏组件,但注销功能存在问题。注销功能仅在我刷新页面时有效。我该如何解决这个问题?提前致谢!

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);
    }
  }, []);

还注意到当我在导航栏中单击注销时出现此错误

enter image description here

0 个答案:

没有答案