Estoy usando reactjs allí, cuando el usuario cierra la sesión, el almacenamiento local y la sesión se borraron normalmente
Pero cuando el usuario hace clic en el botón Atrás en el navegador, el usuario aún puede acceder al tablero e incluso puede administrarlo.
¿Cómo prevenir esto?
Acción de cierre de sesión:
export const logoutUserAction = () => dispatch => { //! Loading dispatchLoading(dispatch, LOGOUT_USER_ACTION); firebase .auth() .signOut() .then(() => { window.localStorage.removeItem('user'); dispatchSuccess(dispatch, LOGOUT_USER_ACTION, 'Success Logout!!!'); }) .catch(() => { window.localStorage.removeItem('user'); dispatchError(dispatch, LOGOUT_USER_ACTION, 'Failed Logout!!!'); }); };Verifique la acción de inicio de sesión:
export const checkLoginAction = history => dispatch => { //! Loading dispatchLoading(dispatch, CHECK_LOGIN_ACTION); const user = JSON.parse(window.localStorage.getItem('user')); if (user) { firebase .database() .ref(`users/${user.uid}`) .once('value') .then(snapshot => { if (snapshot.val()) { window.localStorage.setItem('user', JSON.stringify(snapshot.val())); history.push('/dashboard'); dispatchSuccess(dispatch, CHECK_LOGIN_ACTION, snapshot.val()); }; };Configuración de ruta privada:
function ConfigRoute({ component: Component, dispatch, checkLoginLoading, checkLoginResult, ...rest }) { const history = useHistory(); useEffect(() => { dispatch(checkLoginAction(history)); }, [dispatch, history]); return ( <Route {...rest} render={(props) => { if (checkLoginLoading) { return <LoadingIndicator /> } else { return <Component {...props} /> } }} /> ); };Enrutador:
<Switch> <ConfigRoute exact path="/dashboard" component={Dashboard} /> <ConfigRoute exact path="/product" component={ProductList} /> <Redirect to="/auth/login" /> </Switch>El problema es que sus rutas no verifican si el usuario está registrado o no. Solo redirige cuando inicia sesión o cierra sesión. Pero si alguien ingresa la ruta manualmente podría acceder a ella.
Necesitará crear rutas personalizadas que verifiquen por sí mismas si el usuario ha iniciado sesión o no y redirigir a la página de inicio de sesión si el usuario no ha iniciado sesión. Consulte este ejemplo de uno de mis proyectos.
También recomendaría crear un proveedor para el estado de Auth para que las rutas personalizadas puedan acceder desde allí. Aquí también hay un ejemplo para eso. Solo al iniciar sesión y cerrar sesión, cambie el estado de autenticación utilizando el proveedor.
Lo último que recomendaría es usar onAuthStateChanged para capturar el estado de autenticación en sí. De esa manera, puede iniciar sesión y cerrar sesión sin hacer nada después de eso manualmente. Simplemente escuche los cambios de estado de autenticación usando ese oyente y cambie el estado del proveedor de autenticación con él.