Estoy creando una aplicación que incluye el enrutador de reacción y estoy tratando de cerrar sesión en la aplicación. Estoy usando history.push('/') para redirigir a la página de inicio, pero al hacer clic en la flecha hacia atrás, vuelvo a iniciar sesión en la aplicación y se me redirige a la pantalla anterior. ¿Hay alguna forma de proteger esto?
Normalmente resuelvo esto definiendo rutas públicas y protegidas. Las rutas públicas son las que deben estar disponibles para todos los usuarios (iniciar sesión, registrarse, etc.). Las rutas protegidas son aquellas a las que solo pueden acceder los usuarios autenticados.
Por ejemplo, digamos que estamos almacenando la clave de autenticación del usuario actual en nuestro estado. Si tenemos las rutas /login public y /home protected, y un botón de cierre de sesión, simplemente podemos definir la siguiente lógica:
const Router = props => { const [key, setKey] = useState("Auth Key") const publicRoutes = [<Route path="/login" component={Login} />] const protectedRoutes = [<Route path="/home" component={Home} />] return ( <Switch> {key === null ? publicRoutes : protectedRoutes} <button onClick={() => setKey(null)>Log out</button>} </Switch> ) } De esta manera, solo permitirá que los usuarios autenticados accedan a sus rutas protegidas. Sin embargo, debe encontrar una mejor manera de autenticar a sus usuarios, porque en este caso, si el cliente simplemente cambia su estado de null a casi cualquier otra cosa, tendrá acceso completo a sus rutas protegidas. Probablemente necesitará usar algún tipo de clave de autenticación JWT para verificar la identidad del usuario.