保護されたルートの作成ガイド:react-router-dom を使用した保護されたルーティングの実装
<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>
