Ya hay muchas respuestas, pero no pude usarlas de acuerdo con mi escenario en el que mi componente de inicio de sesión es un componente secundario y estoy usando react-router-dom de la versión 5.1.2 actualmente estoy usando almacenamiento local para guardar authToken pero Sé que no es un buen enfoque. ¿Dónde debo guardar el token de autenticación, de modo que cada vez que alguien intente acceder a la ruta de inicio de sesión manualmente o con un botón, sea redirigido porque el token expiró en mi ruta que estoy usando actualmente en app.js?

 <Route path={process.env.PUBLIC_URL + "/login-register"} component={(!isVerified)?LoginRegister:HomeFashion}/>

y este es el inicio de sesión del componente secundario

 const login = async()=>{ try{ const options = { username:username, password:password } var response = await axios.post(CONFIG.url+'api/login',options) localStorage.setItem("__user",JSON.stringify(response.data)) history.push({ pathname: '/', // search: '?update=true', // query string state: { // location state user: response.data, }, }); }catch(err){ isError(true) } } React.useEffect(()=>{ if(location.state!==undefined){ setMsg(location.state.msg) if(msg) { alert(msg) } } },[location])

lo que estoy haciendo es cuando inicio sesión con éxito, obtengo token y datos de usuario en el backend del formulario de respuesta. Lo almaceno en localStorage y redirecciono las cosas de acuerdo con él.

¿Cuál es la forma correcta de hacerlo?