我正在使用node.js和react.js进行简单的登录和注销功能。问题是,当我要从网站注销时,导航栏不会在我注销后变为登录状态。它从本地存储中删除了我的详细信息,但是注销后,我的导航栏仍然保持不变。对不起,我的代码不好,我仍然是新来的
App.js
import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import { Switch, Route} from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';
import Info from './components/pages/Info/Info';
import infoMs from './components/pages/Info/infoMs';
import Login from './components/Login';
import Register from './components/Register';
import Profile from './components/Profile';
function App()
{
return(
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path={["/", "/home"]} component={Home}/>
<Route path='/service' component={Service}/>
<Route path='/phua' component={Info}/>
<Route path='/foong' component={infoMs}/>
<Route exact path='/login' component={Login}/>
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
</Switch>
<Footer />
</BrowserRouter>
);
}
export default App;
auth-service.js
import axios from "axios";
const API_URL = "http://localhost:8080/api/auth/";
const register = (username, email, password) => {
return axios.post(API_URL + "signup", {
username,
email,
password,
});
};
const login = (username, password) => {
return axios
.post(API_URL + "signin", {
username,
password,
})
.then((response) => {
if (response.data.accessToken) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data;
});
};
const logout = () => {
localStorage.removeItem("user");
};
const getCurrentUser = () => {
return JSON.parse(localStorage.getItem("user"));
};
export default {
register,
login,
logout,
getCurrentUser,
};
navbar.js
import React, { useState, useEffect } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
import AuthService from "../services/auth-service";
export const img1 = require('./images/kdu.png');
function Navbar () {
const [currentUser, setCurrentUser] = useState(undefined);
useEffect(() => {
const user = AuthService.getCurrentUser();
if (user) {
setCurrentUser(user);
}
}, []);
const logOut = () => {
AuthService.logout();
};
const [click,setClick]= useState(false);
const [button,setButton]= useState(true)
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960){
setButton(false)
} else {
setButton(true)
}
};
useEffect(() => {
showButton();
}, []);
window.addEventListener('resize',showButton);
return (
<>
<IconContext.Provider value ={{color: "#fff"}}>
<nav className='navbar'>
<div className='navbar-container container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<img src="/images/Logo-WHITE.png"
alt="UOWKDU Logo" width="35%" height="85%" className='navbar-icon' />
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
Services
</Link>
</li>
<li className='nav-item'>
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
About Us
</Link>
</li>
{currentUser ? (
<div className="container-Current">
<li className="nav-btn">
<Link to={'/profile'} className='btn-link' >
<Button buttonStyle='btn--outline' >{currentUser.username}</Button>
</Link>
</li>
<li className='nav-btn'>
<Link to='/login' className='btn-link' onClick={logOut}>
<Button buttonStyle='btn--outline' >LogOut</Button>
</Link>
</li>
</div>
) : (
<div className="container-Current">
<li className="nav-btn">
<Link to={'/login'} className='btn-link' >
<Button buttonStyle='btn--outline' >Login</Button>
</Link>
</li>
</div>
)}
<li className='nav-btn'>
{button ? (
<Link to='/sign-up' className='btn-link'>
<Button buttonStyle='btn--outline' >SIGN UP</Button>
</Link>
) : (
<Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
<Button
buttonStyle='btn--outline'
buttonSize='btn--mobile'
>
SIGN UP
</Button>
</Link>
)}
</li>
</ul>
</div>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar
答案 0 :(得分:1)
注销时将setCurrentUser设置为null。它将在导航栏中触发更新。
const logOut = () => {
AuthService.logout();
setCurrentUser(null)
};
答案 1 :(得分:1)
尽管localStorage
值已删除,但状态不会改变。您必须将当前用户设置为undefined。
const logOut = () => {
AuthService.logout();
setCurrentUser(undefined)
};
答案 2 :(得分:1)
您的代码质量很好。我可能要添加的另一项内容(即使这不是您原始问题的一部分)是您可能希望在用户注销后将其重定向到新页面。我认为导航栏不会以其他方式呈现新导航栏。
您可以使用()