如果令牌不存在，我想重定向页面登录，但它不工作.当没有令牌存在或注销时，我想重定向页面登录

Question

我正在使用React Router Dom V6

这里if(!localStorage.getItem("token")){ navigate("/login") }不工作

import axios from 'axios';

import {useNavigate} from 'react-router-dom';

const Home = (props) => {
const [user,setUser]=useState(null);
let navigate = useNavigate();
const getUser=async()=>{                                   **Here i have access the token**
const res=await axios.get("/auth",{
headers:{
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
});
setUser(res.data);
};
useEffect(()=>{
getUser();
},[]);
const logout=()=>{                     **I have removed the token here**
localStorage.removeItem("token");
navigate("/login");
};
if(!localStorage.getItem("token")){    //HERE IS NOT WORKING
navigate("/login");
}

return (
<div className="m-5">
<div className="jumbotron">
<p className="lead">Welcome {user && user.name}</p>
<button className="btn btn-danger" onClick={logout}>Logout</button>
</div>
</div>
)
}
export default Home       

Answer 1

您可以在useEffect方法中检查这一点，如果令牌存在，则getuser，否则导航到登录页面

useEffect(()=>{
if(!localStorage.getItem("token")){
navigate("/login");
}else{
getUser();
}
},[]);

Answer 2

您不应该在函数之外添加if语句，正如本网站所建议的那样。if语句只能在有条件渲染的函数之外使用(即当if语句返回某些东西时)。当您只想检查一次时，您应该在useEffect中检查它。对于您的示例，它应该是:

useEffect(() => {
getUser()
if(!localStorage.getItem("token")) {
navigate("/login");
}
}, [])