Implementierung von React Routing Guard (Routing-Interception)

...
router.beforeEach(async(zu, von, weiter) => {
    const toPath = zu.Pfad;
    const vonPfad = von.Pfad;
})
...

importiere * als React von „react“;
importiere { HashRouter, Switch, Route, Redirect } von „react-router-dom“;
 
importiere Index aus "./page/index";
Home aus "./page/home" importieren;
importiere ErrorPage aus "./page/error";
Login aus "./page/login" importieren;
 
export const Router = () => (
    <HashRouter>
        <Schalter>
            <Routenpfad="/" genaue Komponente={Index}/>
            <Routenpfad="/login" genaue Komponente={Login}/>
            <Routenpfad="/home" genaue Komponente={Home}/>
            <Route path="/404" genaue Komponente={ErrorPage}/>
            <Weiterleitung zu="/404" />
        </Schalter>
    </HashRouter>
);

/**
 * Definieren Sie die Routing-Komponente und setzen Sie „Auth“ auf „true“, um anzugeben, dass für die Route eine Berechtigungsüberprüfung erforderlich ist.*/

importiere Admin aus "./pages/Admin";
Login aus "./pages/Login" importieren;
Importfehler aus "./pages/Error";

exportiere const routerMap = [
    {Pfad: "/", Name: "admin", Komponente: Admin, Authentifizierung: true},
    {Pfad: "/login", Name: "Login", Komponente: Login},
    {Pfad: "/Fehler", Name: "Fehler", Komponente: Fehler},
];

/**
 * Routing Guard-Überprüfung */
importiere React, {Component} von „react“;
importiere {Route, Redirect} von „react-router-dom“;

Klasse FrontendAuth erweitert Komponente {
    // eslint-disable-next-line kein nutzloser Konstruktor
    Konstruktor(Requisiten) {
        super(Requisiten);
    }

    rendern() {
        const {routerConfig, location} = diese.props;
        const {Pfadname} = Standort;
        const isLogin = localStorage.getItem("Benutzer");
        console.log(Pfadname, isLogin);
        console.log(Speicherort);
        // Wenn für die Route keine Berechtigungsprüfung erforderlich ist, außer für die Anmeldeseite im angemeldeten Zustand // Denn nach der Anmeldung können Sie nicht zur Anmeldeseite springen // Dieser Teil des Codes dient zum Zugriff auf Routen, für die im nicht angemeldeten Zustand keine Berechtigungsprüfung erforderlich ist const targetRouterConfig = routerConfig.find(
            (Element) => Element.Pfad === Pfadname
        );
        console.log(ZielRouterConfig);
        wenn (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
            const {Komponente} = ZielRouterConfig;
            zurück <Route exakter Pfad={Pfadname} Komponente={Komponente}/>;
        }
        wenn (istLogin) {
            // Wenn Sie angemeldet sind, möchten Sie zur Anmeldeseite springen und zur Startseite weiterleiten, wenn (Pfadname === "/login") {
                zurück <Umleitung zu="/"/>;
            } anders {
                // Wenn die Route zulässig ist, springe zur entsprechenden Route if (targetRouterConfig) {
                    zurückkehren (
                        <Routenpfad={Pfadname} Komponente={targetRouterConfig.component}/>
                    );
                } anders {
                    // Wenn die Route unzulässig ist, Weiterleitung zur 404-Seite return <Redirect to="/error"/>;
                }
            }
        } anders {
            // Im Nicht-Anmeldestatus, wenn die Route zulässig ist und eine Berechtigungsüberprüfung erfordert, zur Anmeldeseite springen und eine Anmeldung anfordern, wenn (targetRouterConfig && targetRouterConfig.auth) {
                zurückgeben <Umleitung zu="/login"/>;
            } anders {
                // Im nicht angemeldeten Zustand, wenn die Route unzulässig ist, Weiterleitung zu 404
                zurückgeben <Umleitung zu="/error"/>;
            }
        }
    }
}

Standard-FrontendAuth exportieren;

importiere „./App.less“;
importiere React, {Fragment} von "react";
importiere {Switch} von ‚react-router-dom‘
importiere FrontendAuth aus "./FrontendAuth";
importiere {routerMap} aus "./routerMap";

Funktion App() {
    zurückkehren (
        <Fragment>
            {/*Nur einen abgleichen, wenn der Abgleich erfolgreich ist, keinen weiteren Abgleich durchführen, hohe Effizienz*/}
            <Schalter>
                <FrontendAuth routerConfig={routerMap}/>
            </Schalter>
        </Fragment>
    );
}

Standard-App exportieren;