リアクトルーティングガード（ルーティングインターセプション）の実装

...
router.beforeEach(async(to, from, next) => {
    定数 toPath = to.path;
    定数 fromPath = from.path;
})
...

'react' から * を React としてインポートします。
'react-router-dom' から { HashRouter、Switch、Route、Redirect } をインポートします。
 
「./page/index」からIndexをインポートします。
「./page/home」からHomeをインポートします。
「./page/error」からErrorPageをインポートします。
「./page/login」からログインをインポートします。
 
エクスポートconstルーター = () => (
    <ハッシュルーター>
        <スイッチ>
            <ルートパス="/" 正確なコンポーネント={インデックス}/>
            <ルート パス="/login" 正確なコンポーネント = {ログイン}/>
            <ルート パス="/home" 正確なコンポーネント={Home}/>
            <ルート パス="/404" 正確なコンポーネント = {ErrorPage}/>
            <リダイレクト先="/404" />
        </スイッチ>
    </ハッシュルーター>
);

/**
 * ルーティングコンポーネントを定義し、auth を true に設定して、ルートに権限検証が必要であることを示します */

「./pages/Admin」からAdminをインポートします。
「./pages/Login」からLoginをインポートします。
「./pages/Error」からErrorをインポートします。

エクスポートconst routerMap = [
    {パス: "/"、名前: "admin"、コンポーネント: Admin、認証: true}、
    {パス: "/login", 名前: "ログイン", コンポーネント: ログイン},
    {パス: "/error", 名前: "error", コンポーネント: Error},
];

/**
 * ルーティングガード検証 */
React をインポートし、{Component} を "react" から取得します。
「react-router-dom」から {Route、Redirect} をインポートします。

クラスFrontendAuthはComponentを拡張します{
    // eslint は、次の行に無駄なコンストラクタを無効にします
    コンストラクタ(props) {
        スーパー(小道具);
    }

    与える（） {
        定数 {routerConfig, location} = this.props;
        const {パス名} = 場所;
        const isLogin = localStorage.getItem("user");
        console.log(パス名、isLogin);
        console.log(場所);
        // ログイン状態でログインページ以外、権限チェックを必要としないルートの場合 // ログイン後はログインページにジャンプできないため // この部分のコードは、非ログイン状態で権限チェックを必要としないルートにアクセスするためのものです const targetRouterConfig = routerConfig.find(
            (item) => item.path === パス名
        );
        コンソールにログ出力します。
        targetRouterConfig が targetRouterConfig.auth であり、isLogin である場合、
            const {コンポーネント} = targetRouterConfig;
            return <ルートの正確なパス={パス名} コンポーネント={コンポーネント}/>;
        }
        if (ログイン) {
            // ログインしている場合は、ログインページにジャンプしてホームページにリダイレクトします if (pathname === "/login") {
                <Redirect to="/"/> を返します。
            } それ以外 {
                // ルートが正当な場合は、対応するルートにジャンプします if (targetRouterConfig) {
                    戻る （
                        <ルート パス = {パス名} コンポーネント = {targetRouterConfig.component} />
                    );
                } それ以外 {
                    // ルートが不正な場合は、404 ページにリダイレクトします。 return <Redirect to="/error"/>;
                }
            }
        } それ以外 {
            // 非ログイン状態で、ルートが正当であり、権限の検証が必要な場合は、ログインページにジャンプしてログインを要求します。if (targetRouterConfig && targetRouterConfig.auth) {
                <Redirect to="/login"/> を返します。
            } それ以外 {
                // ログインしていない状態で、ルートが不正な場合は404にリダイレクトします
                <Redirect to="/error"/> を返します。
            }
        }
    }
}

デフォルトのFrontendAuthをエクスポートします。

'./App.less' をインポートします。
React をインポートし、{Fragment} を "react" から取得します。
'react-router-dom' から {Switch} をインポートします。
「./FrontendAuth」からFrontendAuthをインポートします。
「./routerMap」から {routerMap} をインポートします。

関数App() {
    戻る （
        <断片>
            1 つだけ一致させ、一致が成功した場合はそれ以上一致させないため、効率が高くなります*/
            <スイッチ>
                <フロントエンド認証 routerConfig={routerMap}/>
            </スイッチ>
        </フラグメント>
    );
}

デフォルトのアプリをエクスポートします。