web-dev-qa-db-fra.com

Rediriger un utilisateur vers la page demandée après une authentification réussie avec react-router-dom

J'ai créé un composant de route publique pour la connexion afin de s'afficher si l'utilisateur n'est pas authentifié. Chaque fois qu'un utilisateur qui n'est pas connecté clique sur un itinéraire protégé, il sera redirigé vers la page de connexion où il pourra entrer les informations d'identification. Je veux une manière programmatique pour que s'il se connecte avec les informations d'identification correctes, il soit redirigé vers la page à laquelle il a essayé d'accéder en premier lieu. Par exemple, si l'utilisateur a demandé la page de profil, il doit y être redirigé après la connexion, si l'utilisateur a demandé la page de paramètres, la même chose se produirait.

Pour le moment, je ne peux que les rediriger vers le chemin d’accueil /. Existe-t-il un moyen d'utiliser Redirection pour qu'il connaisse le chemin demandé par l'utilisateur?

Voici mon code actuel pour le composant Public Route

export const PublicRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}: PublicRouteProps) => (
    <Route
        {...rest}
        component={(props: any) => {
            console.log(props.path);
            return isAuthenticated.auth ? (
                <Redirect to='/' />
            ) : (
                <div>
                    <Component {...props} />
                </div>
            );
        }}
    />
);
const mapStateToProps = (state: ReduxStoreState) => ({
    isAuthenticated: state.isAuthenticated
});

export default connect(mapStateToProps)(PublicRoute);
reactjstypescriptredirectreact-routerreact-router-dom
3
Ahmed Magdy

Dans votre App.js

import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      urlToRedirect: null
    }
  }
  componentWillReceiveProps(nextProps) {
    if ( nextProps.location !== this.props.location && 
         !this.props.isAuthenticated && 
         this.props.history.action === 'REPLACE') {
      this.setState({urlToRedirect: this.props.location.pathname});
    }
  }
}
const mapStateToProps = (state: ReduxStoreState) => ({
    isAuthenticated: state.isAuthenticated
});
export default connect(mapStateToProps, null)(withRouter(App));

au lieu d'utiliser setState, vous pouvez utiliser votre état Redux puis accéder à cette URL.

0
Олег Войтинський

Mec, je pense que la meilleure façon est d'utiliser history.Push fonction dans componentDidMount comme ceci:

componentDidMount() {
  if(isAuthenticated.auth) {
    this.props.history.Push('/profile')
  }
  else {
    this.props.history.Push('/login') 
  }
}
0
Mahdi