如何防止用戶返回反應 redux？

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