Tengo rutas públicas y protegidas, que implementadas en la siguiente lógica.
useEffect(() => { checkIfAuthenticated(); //This function checks if the token is in localStorage // Initial state isAuthenticated = false }, []); const newHistory = useHistory() <Router history={newHistory}> {isAuthenticated ? ( <Layout> <Switch> <Route exact path="/clients" component={Clients} /> <Route exact path="/staff" component={Staff} /> <Redirect to="/clients" /> </Switch> </Layout> ) : ( <> <Route path="/login" component={Login} /> <Redirect to="/login" /> </>)} </Router> //store checkIfAuthenticated() { const accessToken = localStorage.getItem("access_token"); const refreshToken = localStorage.getItem("refresh_token"); if (accessToken && refreshToken) { this.isAuthenticated = true; } }El problema es que cuando actualizo la página en la ruta /staff?page=1, la aplicación se inicializa desde cero y se me redirige a la ruta /clients. ¿Hay alguna forma de manejar este caso? Es decir, cuando actualizo la ruta privada, debo permanecer en la misma página. ¿Tal vez debería guardar la ruta actual en localStorage?
Debe usar la biblioteca redux-persist persist para mantener el valor de la variable isAuthenticated en localStorage después de la actualización.
Algo como esto:
import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import userReducer from './userReducer'; const persistConfig = { key: 'user', storage, whitelist: ['access_token', 'refresh_token'], }; const persistedReducer = persistReducer(persistConfig, userReducer);Si está seguro de la persistencia de las variables en localStorage, verifique esto también:
const accessToken = localStorage.getItem("access_token"); const refreshToken = localStorage.getItem("refresh_token"); const [isAuthenticated, setIsAuthenticated] = useState(false); useEffect(() => { if (accessToken && refreshToken) { setIsAuthenticated(true); } }, [accessToken , refreshToken ]); const newHistory = useHistory() <Router history={newHistory}> {isAuthenticated ? ( <Layout> <Switch> <Route exact path="/clients" component={Clients} /> <Route exact path="/staff" component={Staff} /> <Redirect to="/clients" /> </Switch> </Layout> ) : ( <> <Route path="/login" component={Login} /> <Redirect to="/login" /> </>)} </Router>