ReactJS：本地存储需要时间来存储令牌，并且登录页面无法首次重定向到仪表板路由

Question

I am following this procedure:

- Hitting to Login API
- Getting Success response containing token
- Setting the token to local storage
- Trying to redirect to protected routes
- Protected component check the token from local storage
- For the first time, it is not getting token from local storage as local storage take some time to store token on local storage
- As the token not set yet to local storage, it assumes the use as not authenticated, and then is now redirecting to the login page for the first time.

Moreover, if I keep my token to the state, and then try to check the authentication taking the token from state, then If I logout from one tab or window, then rest of tabs are not logged out automatically. And need to logout from all tabs manually.

ProtectedRouter.jsx

import { Navigate, Route } from "react-router-dom";
import useAuth from "../hooks/useAuth";

const ProtectedRouter = ({ component }) => {
    const auth = JSON.parse(localStorage.getItem("token")) ?? false; 

    if(auth) {
        return component;
    } else {
        return <Navigate replace to="/login"/>
    }
};

export default ProtectedRouter;

Router.jsx

<Route element={<Layout/>}>
    <Route path="/" element={<ProtectedRouter component={<Dashboard/>}/>}/>
</Route>

Login.jsx

const login = ({email, password}) => {
    axios.post(`http://localhost:7000/api/users/login`, { email, password }).then(response => {
        localStorage.setItem("loggedInUser", JSON.stringify(loggedInUser));
        localStorage.setItem("token", JSON.stringify(token));
    }).catch(err => {
        console.error(err.message().toString());
    });
};

Answer 1

It has been 3 months since the question was asked, but maybe this can help someone else. I find using navigate('/route-to', { replace: true }); very useful as it refreshes the page making it possible for the token to be available on local storage. I can't see where you are redirecting after a successful login. You should redirect like this navigate('/', { replace: true }); Also, where are you getting the token and loggedInUser from? After a successful login, the API is returning token, so you should get loggedInUser and token from the response.

Here is what you can do.

const login = ({email, password, navigate}) => {
  axios.post(`http://localhost:7000/api/users/login`, { email, password }).then(response => {
      localStorage.setItem("loggedInUser", JSON.stringify(response.data.loggedInUser));
      localStorage.setItem("token", JSON.stringify(response.data.token));
      navigate('/', { replace: true });
  }).catch(err => {
      console.error(err.message().toString());
  });
};

Dont forget to pass navigate ( useNavigate ) when using login() .