Aquí, estoy tratando de evitar que el usuario regrese a la página de inicio de sesión si el usuario está conectado actualmente, la primera línea en la función de procesamiento está causando un error
Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
Pero no estoy llamando a setState aquí, solo estoy llamando a una función de otro módulo para verificar si devuelve un usuario o no
render() { if (auth.getCurrentUser()) return <Redirect to="/" />; return ( <div id="loginWrapper"> <h3>Login</h3> <ToastContainer /> <form onSubmit={this.handleSubmit}> {this.renderInput("username", "Username")} {this.renderInput("password", "Password", "password")} {this.renderButton("Login")} </form> </div> );}
y aquí está mi módulo de autenticación desde donde se llama a la función,
import jwtDecode from "jwt-decode"; export function getCurrentUser() { try { const jwt = localStorage.getItem("token"); return jwtDecode(jwt); } catch { return null; } } export default { getCurrentUser, };use la condición ternaria con el token jwt en su ruta, lo que puede ayudarlo a verificar que el usuario haya iniciado sesión o no, también puede hacer que su ruta sea privada. ty
Podría crear un componente ProtectedRoute que redirija según el estado de autenticación.
import React from 'react'; import { Route } from 'react-router-dom'; const ProtectedRoute = ({ component: Component, ...restProps }) => { return ( <Route {...restProps} render={ props => { if (!auth.getCurrentUser()) { return <Component {...rest} {...props} /> } else { return <Redirect to={ { pathname: '/', state: { from: props.location } } } /> } } } /> ) } export default ProtectedRoute;Luego puede llamar al componente ProtectedRoute en la página de inicio de sesión así:
<ProtectedRoute path='/login' component={LoginPage} />