保護されたルートの作成ガイド:react-router-dom を使用した保護されたルーティングの実装
P粉011684326
P粉011684326 2023-08-23 10:07:33
0
2
507
<p><code>react-router-dom</code> を使用して保護されたルートを作成し、応答を localStorage に保存して、ユーザーが次回開いたときに詳細を再度表示できるようにする方法。ログイン後、ダッシュボード ページにリダイレクトされる必要があります。 </p> <p>すべての関数は ContextApi に追加されます。 </p> <p>コードサンドボックス リンク: コード</p> <p>試してみましたが、うまくいきませんでした。</p> <p>路由页面</p> <pre class="brush:php;toolbar:false;">import React, { useContext } from "react"; import { globalC } から "./context"; import { Route, Switch, BrowserRouter } from "react-router-dom"; "./About" から About をインポートします。 「./Dashboard」からダッシュボードをインポートします。 「./Login」からログインをインポートします。 "./PageNotFound" から PageNotFound をインポートします。 関数ルート() { const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); 戻る ( <ブラウザルーター> <スイッチ> {認証ログイン ? ( <> <ルート パス="/ダッシュボード" コンポーネント={ダッシュボード} 正確 /> <ルートの正確なパス="/概要" コンポーネント={概要} /> </> ):( <ルートパス="/" コンポーネント={ログイン} 正確 /> )} <ルートコンポーネント={PageNotFound} /> </スイッチ> </ブラウザルーター> ); } デフォルトのルートをエクスポート;</pre> <p>上下文页面</p> <pre class="brush:php;toolbar:false;">import React, { Component, createContext } from "react"; 「axios」から axios をインポートします。 エクスポート const globalC = createContext(); エクスポート クラス Gprov はコンポーネント { 状態 = { 認証ログイン: null、 認証ログインエラー: null }; コンポーネントDidMount() { var localData = JSON.parse(localStorage.getItem("loginDetail")); if (ローカルデータ) { this.setState({ authLogin: ローカルデータ }); } } loginData = async () => { ペイロード = { にします トークン: "ctz43XoULrgv_0p1pvq7tA", データ: { 名前: "名前名", 電子メール: "インターネット電子メール", 電話: "phoneHome"、 _リピート: 300 } }; アクシオスを待つ .post(`https://app.fakejson.com/q`, ペイロード) .then((res) => { if (res.status === 200) { this.setState({ 認証ログイン: res.data }); localStorage.setItem("loginDetail", JSON.stringify(res.data)); } }) .catch((err) => this.setState({ 認証ログインエラー: エラー }) ); }; 与える() { // console.log(localStorage.getItem("loginDetail")); 戻る ( <グローバルC.プロバイダー 値={{ ...この状態、 ログインデータ: this.loginData }} > {this.props.children} </globalC.Provider> ); } }</pre> <p><br /></p>
P粉011684326
P粉011684326

全員に返信(2)
P粉968008175

v6 の場合:

リーリー

ドキュメントへのリンク: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

いいねを押す +0
P粉562845941

###質問### リーリー

Switch

Route コンポーネントと Redirect コンポーネント以外のレンダリングは処理しません。このように「ネスト」したい場合は、各コンポーネントを汎用ルートでラップする必要がありますが、これはまったく必要ありません。 ログイン コンポーネントは、元の訪問時の「ホーム」またはプライベート ルートに戻るリダイレクトも処理しません。

###解決###

反応ルーターダム

v6

バージョン 6 では、カスタム ルーティング コンポーネントは一般的ではなくなり、認証レイアウト コンポーネントを使用する方法が推奨されます。 リーリー ...

リーリー ###または### リーリー

...

リーリー

反応ルーターダム

v5

認証コンテキストを使用する

PrivateRoute

コンポーネントを作成します。 リーリー 元のアクセスへのリダイレクトを処理するために、

Login

コンポーネントを更新します。 リーリー すべてのルートを「フラット リスト」としてレンダリングします

リーリー

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート