Estoy creando la aplicación React y tengo un pequeño problema al cerrar la sesión del usuario. El botón "Cerrar sesión" es un elemento de Link que conduce al componente Cerrar sesión. Luego, el componente de cierre de sesión llama a la función de cierre de sesión con el token de acceso que se envía al backend, el usuario y el token de acceso se borran de mi tienda y la página redirige al usuario a la página de inicio de sesión. Todo esto funciona (la sesión del usuario se cerró con éxito), pero tengo un pequeño problema con la experiencia del usuario. De hecho, mi componente de cierre de sesión primero intenta redirigir a la página de inicio de sesión antes de que se ejecute la función de cierre de sesión, y mi enrutador verifica si hay un usuario (todavía lo hay) y lo redirige a la página de inicio. Después de que ese usuario cierre sesión y sea redirigido a la página de inicio de sesión. ¿Cómo puedo manejar esto?
Aquí está el botón Cerrar sesión
<Link to='/logout' className='menu-link px-5'> Sign Out </Link> import React, { useEffect } from 'react'; import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import { Redirect, Switch } from 'react-router-dom'; import * as auth from './redux/AuthRedux'; import { logout } from './redux/AuthCRUD'; import { RootState } from '../../../setup'; export function Logout() { const accessToken: string = useSelector<RootState>(({ auth }) => auth.accessToken, shallowEqual) as string; const dispatch = useDispatch(); useEffect(() => { logout(accessToken).then((response) => { dispatch(auth.actions.logout()); }); }, [dispatch]); return ( <Switch> <Redirect to='/auth/login' /> </Switch> ); }accessToken se elimina de la tienda cuando envía la acción de cierre de sesión, por lo que le permite usar su presencia como una indicación de que todavía tiene un usuario. Si tiene un token de acceso, muestre una rueda giratoria (por ejemplo), el usuario no ha cerrado la sesión. Si no tiene un token de acceso, entonces está desconectado y puede redirigir.
export function Logout() { const accessToken: string = useSelector<RootState>(({ auth }) => auth.accessToken, shallowEqual) as string; const dispatch = useDispatch(); useEffect(() => { logout(accessToken).then((response) => { dispatch(auth.actions.logout()); }); }, [dispatch]); return accessToken ? <Spinner /> : <Redirect to='/auth/login' /> } Mientras estoy aquí, no necesita shallowEqual como el segundo argumento de su useSelector porque es solo una cadena.