Как предотвратить возвращение пользователя в реагирующий редукс?

Question

Как запретить пользователю возвращаться после успешного входа в систему в программе redux? можешь помочь мне ? когда пользователь вошел в систему, он не может go вернуться к некоторым маршрутам, таким как код ниже, это мой код

, в настоящее время я пытаюсь защитить маршруты, чтобы пользователи не могли просто получить к нему доступ, введя URL страницы и прямой доступ к ней.

const RestrictedRoute = ({component: Component, token, ...rest}) =>
  <Route
    {...rest}
    render={props =>
      token
        ? <Component {...props} />
        : <Redirect
          to={{
            pathname: '/signIn',
            state: {from: props.location}
          }}
        />}
  />;


class App extends Component {

  componentWillMount() {
    if (this.props.initURL === '') {
      this.props.setInitUrl(this.props.history.location.pathname);
    }
    const params = new URLSearchParams(this.props.location.search);
    if (params.has("theme")) {
      this.props.setThemeType(params.get('theme'));
    }
    if (params.has("nav-style")) {
      this.props.onNavStyleChange(params.get('nav-style'));
    }
    if (params.has("layout-type")) {
      this.props.onLayoutTypeChange(params.get('layout-type'));
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.token) {
      axios.defaults.headers.common['Authorization'] = "Bearer " + nextProps.token;
    }
    if (nextProps.token && !nextProps.authUser) {
      // this.props.getUser()

    }
  }

  render() {
    const {match, location, locale, token, initURL} = this.props;
    if (themeType === THEME_TYPE_DARK) {
      document.body.classList.add('dark-theme');
    }
    if (location.pathname === '/') {
      if (token === null || !token) {
        return ( <Redirect to={'/signIn'}/> );
      } else if (
        initURL === '' || 
        initURL === '/' || 
        initURL === '/signIn' || 
        initURL === '/signUp' || 
        initURL === '/forgotPassword' || 
        initURL === '/resetPassword' || 
        initURL === '/verifyEmail'
      ) {
        return ( <Redirect to={'/sample'}/> );
      } else {
        return ( <Redirect to={initURL}/> );
      }
    }

    const currentAppLocale = AppLocale[locale.locale];
    return (
      <LocaleProvider locale={currentAppLocale.antd}>
        <IntlProvider
          locale={currentAppLocale.locale}
          messages={currentAppLocale.messages}>

          <Switch>
            <Route exact path='/signIn' component={SignIn}/>
            <Route exact path='/signUp' component={SignUp}/>
            <Route exact path='/forgotPassword' component={ForgotPassword}/>
            <Route exact path='/resetPassword/:id' component={ResetPassword}/>
            <Route exact path='/verifyEmail/:id' component={EmailVerify}/>
            <RestrictedRoute path={`${match.url}`} token={token}
                             component={MainApp}/>
          </Switch>
        </IntlProvider>
      </LocaleProvider>
    )
  }
}

const mapStateToProps = ({settings, auth}) => {
  const {locale, navStyle, themeType, layoutType} = settings;
  const {authUser, token, initURL} = auth;
  return {locale, token, navStyle, themeType, layoutType, authUser, initURL}
};
export default connect(mapStateToProps, {setInitUrl, getUser, setThemeType, onNavStyleChange, onLayoutTypeChange})(App);

Я хочу иметь возможность перенаправить неавторизованного пользователя на страницу входа. Так что единственный способ для них получить доступ к защищенным страницам - войти в систему

Answer 1

Вы можете реализовать небольшую оболочку для маршрутов, к которой пользователь не должен иметь доступ, если он / она вошел в систему

const UnAuthorizedRoutes = ({component: Component, path, exact, strict, token, ...rest}) => {
   return <Route path={path} exact={exact} strict={strict} render={(rProps) => {
          if (token) return <Redirect to='/sample' /> 
          return <Component {...rProps} {...rest} />
   }} />
}

и использовать ее как

        <UnAuthorizedRoutes token={token} exact path='/signIn' component={SignIn}/>
        <UnAuthorizedRoutes token={token} exact path='/signUp' component={SignUp}/>
        <UnAuthorizedRoutes token={token} exact path='/forgotPassword' component={ForgotPassword}/>
        <UnAuthorizedRoutes token={token} exact path='/resetPassword/:id' component={ResetPassword}/>
        <Route exact path='/verifyEmail/:id' component={EmailVerify}/>