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

4
Ahmed Magdy 2019-12-20 08:39.

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

現在のところ、私はそれらをホームパスにリダイレクトすることしかできません/。ユーザーが要求したパスを認識できるようにリダイレクトを使用する方法はありますか?

これがパブリックルートコンポーネントの現在のコードです

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);

3 answers

7
Robin 2019-12-20 17:10.

あなたの質問には簡単には答えられません。基本的に、ユーザーがアクセスしたいパスを覚えておく必要があります。これにより、ユーザーが正常に認証された後、そのパスにリダイレクトできます。

ここに例を作成しました。その例の説明といくつかのコードを以下に示します。

そのため、ユーザーが認証されていない場合は、パスをアプリの状態に設定します。私はあなたProtectedRouteをこれに変更します:

import * as React from 'react';
import { Redirect, Route, RouteProps, useLocation } from 'react-router';

export interface ProtectedRouteProps extends RouteProps {
  isAuthenticated: boolean;
  authenticationPath: string;
  redirectPathOnAuthentication: string;
  setRedirectPathOnAuthentication: (path: string) => void;
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = props => {
  const currentLocation = useLocation();

  let redirectPath = props.redirectPathOnAuthentication;
  if (!props.isAuthenticated) {
    props.setRedirectPathOnAuthentication(currentLocation.pathname);
    redirectPath = props.authenticationPath;
  }

  if (redirectPath !== currentLocation.pathname) {
    const renderComponent = () => <Redirect to={{ pathname: redirectPath }} />;
    return <Route {...props} component={renderComponent} render={undefined} />;
  } else {
    return <Route {...props} />;
  }
};

export default ProtectedRoute;

認証とリダイレクトパスを覚えておくために、次のモデルに基づいてコンテキストを作成します。

export interface Session {
  isAuthenticated?: boolean;
  redirectPathOnAuthentication?: string;
}

export const initialSession: Session = {}

それによると、コンテキストは次のようになります。

import { createContext, useContext, useState } from 'react';
import { initialSession, Session } from '../models/session';
import React from 'react';

export const SessionContext = createContext<[Session, (session: Session) => void]>([initialSession, () => {}]);
export const useSessionContext = () => useContext(SessionContext);

export const SessionContextProvider: React.FC = (props) => {
  const [sessionState, setSessionState] = useState(initialSession);
  const defaultSessionContext: [Session, typeof setSessionState]  = [sessionState, setSessionState];

  return (
    <SessionContext.Provider value={defaultSessionContext}>
      {props.children}
    </SessionContext.Provider>
  );
}

次に、このコンテキストをアプリで利用できるようにする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import { SessionContextProvider } from './contexts/SessionContext';
import { BrowserRouter } from 'react-router-dom';

const createApp = () => {
  return (
    <BrowserRouter>
      <SessionContextProvider>
        <App />
      </SessionContextProvider>
    </BrowserRouter>
  )
}

ReactDOM.render(createApp(), document.getElementById('root'));

メインコンテナで、保護されたルートを適用できます。

import React from 'react';
import { Switch, Route } from 'react-router';
import ProtectedRoute, { ProtectedRouteProps } from '../components/ProtectedRoute';
import { useSessionContext } from '../contexts/SessionContext';
import { Login } from './Login';
import { ProtectedPage } from './ProtectedPage';
import { AnotherSecretPage } from './AnotherSecretPage';
import { StartPage } from './StartPage';

const App: React.FC = () => {
  const [sessionContext, updateSessionContext] = useSessionContext();

  const setRedirectPathOnAuthentication = (path: string) => {
    updateSessionContext({...sessionContext, redirectPathOnAuthentication: path});
  }

  const defaultProtectedRouteProps: ProtectedRouteProps = {
    isAuthenticated: !!sessionContext.isAuthenticated,
    authenticationPath: '/login',
    redirectPathOnAuthentication: sessionContext.redirectPathOnAuthentication || '',
    setRedirectPathOnAuthentication
  };

  return (
    <div>
      <Switch>
        <ProtectedRoute {...defaultProtectedRouteProps} exact={true} path='/' component={StartPage} />
        <ProtectedRoute {...defaultProtectedRouteProps} path='/protected' component={ProtectedPage} />
        <ProtectedRoute {...defaultProtectedRouteProps} path='/another' component={AnotherSecretPage} />
        <Route path='/login' component={Login} />
      </Switch>
    </div>
  );
}

export default App;
0
Mahdi 2019-12-20 16:15.

おい私は最善の方法はこのようにhistory.push関数を使用することだと思いますcomponentDidMount

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

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にアクセスできます。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

その時ゼルダの予告編はおそらく成長した男性を泣かせた

その時ゼルダの予告編はおそらく成長した男性を泣かせた

まったく新しいゼルダの伝説ゲームが期待されているゲームの公開はほとんどありませんが、2004年のE3でトワイライトプリンセスが生み出した激しい反応には何の影響もありません。ゲーム会社が記者会見を従業員でいっぱいにするのはよくあることです。

レポート:テリーコリンズはメッツマネージャーとして行われる

レポート:テリーコリンズはメッツマネージャーとして行われる

写真:アル・ベロ/ゲッティ・ケン・ローゼンタールは、今日のフィリーズとの試合が終了すると、テリー・コリンズがメッツのマネージャーを辞任すると報告しています。これは、大きな救済として上陸したとしても、大きなショックではありません。コリンズの契約は今シーズン後に失効する予定だったので、メッツは彼の将来について何らかの形で決定することを決定しました、そしてロッカールームが準備ができた有毒な場所になったという報告が出た後、彼らが彼を連れ戻すことは想像できませんでした彼らのマネージャーから移動します。

その時私はウェンディのツイッターアカウントを実行している間にウイルスに行きました

その時私はウェンディのツイッターアカウントを実行している間にウイルスに行きました

この画像は法的な理由で削除されました。16分は、一時的に口コミで広まった一般の人々にチェックインするシリーズです。

ポルシェ911フラットシックスが高解像度で解剖されるのを見る

ポルシェ911フラットシックスが高解像度で解剖されるのを見る

写真:911 Magazine / Vimeoポルシェ911フラットシックスは象徴的なエンジンです。このリアマウントエンジンは、おそらくこれまでで最も話題になり、賞賛されたスポーツカーの心臓部です。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language