reactjs - Realización de autenticación en rutas con react-router-v4

authentication redirect

Question

Estoy tratando de escribir la verificación de Authentication para mi DashBoard . Pero la función en sí no se llama. ¿Alguien puede darme alguna solución para esto? Estoy desarrollando en ReactJs.

Esta es la parte de la ruta:

 <Router>
            <div>
              <Route exact path={"/"} component={Home} />
              <Route path={"/SignUp"} component={SignUp} />
              <Route path={"/SignIn"} component={SignIn} />
              <Route path={"/Dashboard"} component={Dashboard} onEnter={this.requireAuth} />
            </div>
          </Router>

Esta es la función:

  requireAuth (nextState, replace) {
    console.log("?????????????",this.state.getToken);
    if(!this.state.getToken) {
      replace({pathname: ''/''});
    }
  }

Answer 1

En react-router v4 , puede hacer uso de render prop to Route junto con los métodos del ciclo de vida para reemplazar la funcionalidad onEnter existente en react-router v3.

Vea esta respuesta para más detalles:

stackoverflow.com/questions/45429963/…

Sin embargo, dado que todo lo que desea hacer es la autenticación en el accesorio onEnter, puede crear fácilmente un HOC que lo haga

const RequireAuth = (Component) => { 

    return class App extends Component { 

        componentWillMount() { 
            const getToken = localStorage.getItem(''token''); 
            if(!getToken) { 
               this.props.history.replace({pathname: ''/''}); 
            } 
        } 
        render() { 
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

y úsalo como

<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>

Editar: en caso de que necesite hacer una llamada de red para averiguar si el uso está autenticado o no, debe escribir el HOC como

 const RequireAuth = (Component) => { 

    return class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }

        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           const { isAuthenticated, isLoading } = this.state;
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

Actualizar:

Además del HOC, también puede PrivateRoute por el componente PrivateRoute como

const PrivateRoute = ({component: Component, isAuthenticated, isLoading, ...rest }) => { 
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 
} 

 export { PrivateRoute };

y puedes usarlo como

  class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }

        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           <Router>
              <div>
                  <Route exact path={"/"} component={Home} />
                  <Route path={"/SignUp"} component={SignUp} />
                  <Route path={"/SignIn"} component={SignIn} />
                  <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/>
               </div>
           </Router>
        }
    }