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>
}
}