我是 React 的新手。当用户单击注销按钮时,上下文函数注销调用并删除 localStorage 令牌并清空所有变量。一瞬间,变量确实变空了,但随后又被填充了。我检查了我的注销功能,但找不到任何错误。localStorage 正在完美地破坏,但其他状态变量没有被擦除。
AuthState.js
// Load User
const loadUser = async () => {
if(localStorage.token) {
setAuthToken(localStorage.token);
}
try {
const res = await axios.get('/api/auth');
dispatch({
type: USER_LOADED,
payload: res.data
});
loadUser();
} catch (err) {
dispatch({type: AUTH_ERROR});
}
}
// Logout User
const logout = () => dispatch({type: LOGOUT});
authReducer.js
case LOGOUT:
localStorage.removeItem('token');
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
error: action.payload
}
导航栏.js
export const Navbar = ({ title, icon }) => {
const authContext = useContext(AuthContext);
const { isAuthenticated, user, logout } = authContext;
const onLogout = () => {
logout();
console.log('user');
console.log(user);
};
const authLinks = (
<Fragment>
<li>
Hello {user && user.name}
</li>
<li>
<a onClick={onLogout} href="#!">
<i className="fas fa-sign-out-alt" /> <span className="hide-sm">Logout</span>
</a>
</li>
</Fragment>
)
const guestLinks = (
<Fragment>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</Fragment>
)
return (
<div className="navbar bg-primary">
<h1>
<i className={ icon } /> <Link to="/">{ title }</Link>
</h1>
<ul>
{isAuthenticated ? authLinks : guestLinks}
</ul>
</div>
)
}
单击注销按钮后,每个值都会返回,但令牌会被完美删除。下面的截图
