web-dev-qa-db-ja.com

react-router-domによる認証が成功した後、ユーザーをリクエストしたページにリダイレクトする

ログイン用のパブリックルートコンポーネントを作成して、ユーザーが認証されていない場合に表示されるようにしました。ログに記録されていないユーザーが保護されたルートをクリックすると、ログインページにリダイレクトされ、そこで資格情報を入力できます。正しい資格情報でログインした場合に、最初にアクセスしようとしたページにリダイレクトされるように、プログラムによる方法が必要です。たとえば、ユーザーがプロファイルページを要求した場合、ログイン後にそのページにリダイレクトする必要があります。ユーザーが設定ページを要求した場合も同様です。

現在のところ、ホームパスにのみリダイレクトできます/。ユーザーが要求したパスがわかるようにリダイレクトを使用する方法はありますか？

これが、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

あなたの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));

setStateを使用する代わりに、Redux状態を使用して、そのURLにアクセスできます。

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

おい私は最良の方法はhistory.PushcomponentDidMountの関数は次のようになります：

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