Detaillierte Erläuterung der Idee zum Einrichten einer Abfangfunktion für die Anmeldeüberprüfung in Vue

Hallo, ich bin灰小猿, ein Programmierer, der wirklich gut darin ist, Bugs zu schreiben!

Als ich heute an einem Projekt arbeitete, bei dem Vue und Springboot interagieren, wollte ich einige auf der Front-End-Basis basierende Vorgänge implementieren, die den Zugriff auf bestimmte Seiten nur nach einer Login-Überprüfung erlauben. Hier ist also eine Lösung zum Erreichen dieser Funktion.

Lassen Sie mich zunächst erklären, wie ich feststelle, ob ich mich angemeldet habe.

1. Lösung

Da in meinem Springboot-Hintergrund das Sicherheitsframework shiro+Jwt verwendet wird, wird nach der Anmeldung ein token an das Frontend zurückgegeben und das Frontend speichert das Token. Daher schaue ich nach, ob im Browser ein Token vorhanden ist. Wenn im Browser ein Token vorhanden ist, bedeutet dies, dass die Anmeldung erfolgreich war und Sie auf die entsprechenden Seiten zugreifen können.

Wenn kein Token vorhanden ist, bedeutet dies, dass Sie nicht angemeldet sind, und j springt zur Anmeldeseite. Um die Bedienung zu vereinfachen, habe ich den Verifizierungsprozess gekapselt.

注意： Voraussetzung für die Verwendung dieser Methode zur Überprüfung ist, dass Ihr Front-End und Back-End über Shiro und Token überprüft werden und das Front-End das vom Server zurückgegebene Token speichert.

2. Lassen Sie den Browser das vom Server zurückgegebene Token speichern

Sehen wir uns zunächst an, wie das vom Server zurückgegebene Token auf der Front-End-Seite gespeichert wird.

Zuerst habe ich eine SET_TOKEN-Methode in der Datei index.js unter der Store-Datei gekapselt, um das Token im Browser zu speichern, damit wir unser Token jedes Mal lokal über localStorage.getItem("token") abrufen können, und außerdem habe ich eine REMOVE_INFO-Methode gekapselt, um die Token-Informationen im Browser zu löschen, wenn wir uns abmelden.

Der Code in index.js unter der Store-Datei lautet wie folgt:

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Zustand: {
        // Token: "",
        //Benutzerinformationen können direkt aus dem Browser-Token abgerufen werden: localStorage.getItem("token"),
        //Deserialisierungsvorgang userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
    },
    Mutationen:
        /**Ähnlich der Set-Operation*/
        // Dem Token einen Wert zuweisen SET_TOKEN: (Status, Token) => {
            Zustand.Token = Token;
            //Speichern Sie die Informationen im Browser, sodass sie auch nach dem Schließen des Browsers noch vorhanden sind localStorage.setItem("token", token);
        },
        //Der Benutzerinfo einen Wert zuweisen SET_USERINFO: (state, userInfo) => {
            state.userInfo = Benutzerinfo;
            //Die Sitzung wird bei jedem Schließen des Browsers gelöscht und nach der erneuten Anmeldung neu gestartet. //Da sessionStorage keine Objekte speichern kann, muss es in Form eines Strings gespeichert werden. sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
        },
        //Benutzerinformationen entfernen REMOVE_INFO: (Status) => {
            //Wenn Sie Benutzerinformationen entfernen, setzen Sie alle Benutzerinformationen auf leer state.token = "";
            Status.Benutzerinfo = {};
            localStorage.setItem("Token", "");
            sessionStorage.setItem("Benutzerinfo", JSON.stringify(""));
        }

    },
    Getter: {
        /**Ähnlich wie „get request“*/
        //Benutzerinformationen abrufengetUser: state => {
            Status.Benutzerinfo zurückgeben;
        }
    },
    Aktionen: {},
    Module: {}
})

3. Zugriffsberechtigungen in der Anfrage festlegen

Da nicht alle unsere Seiten nur nach Anmeldung aufgerufen werden können, müssen wir für die Seiten, die eine Anmeldung erfordern, Zugriffsberechtigungen festlegen.

In Vue legen wir die Zugriffsroute normalerweise in der Datei index.js unter dem Router fest. Für die Anforderungsroute, die Anmeldeberechtigungen hinzufügen muss, können wir ihr ein Metaattribut hinzufügen und darin ein Boolean-Attribut requireAuth festlegen. Wir verwenden, ob dieses Attribut wahr ist, um zu bestimmen, ob eine Anmeldeüberprüfung erforderlich ist.

Beispielsweise kann auf unsere BlogEdit-Seite nur zugegriffen werden, wenn man angemeldet ist, und für die Anmeldeseite sind keine Anmeldeberechtigungen erforderlich. Daher können wir es folgendermaßen einrichten: （代碼有刪減，但是保留了核心部分，只是刪除了部分路由。）

/**
 * Routing-Registrierung */

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren


//Registrierungsseite importiert Login von '../views/Login.vue'
BlogEdit importieren aus '../views/BlogEdit.vue'


Vue.use(VueRouter)

const Routen = [
    {
        Pfad: '/login',
        Name: 'Login',
        Komponente: Login
    },
    {
        Pfad: '/blog/add',
        Name: 'BlogAdd',
        Komponente: BlogEdit,
        //Fügen Sie einen Berechtigungszugriff hinzu, der angibt, dass dieser Vorgang nur nach der Anmeldung bei Meta ausgeführt werden kann: {
            requireAuth: wahr
        }
    },


]

const router = neuer VueRouter({
    Modus: "Verlauf",
    Basis: Prozess.Umgebung.BASE_URL,
    Routen
})

Standardrouter exportieren

Dies wird bei jeder Anforderung der BlogEdit-Seite beurteilt.

4. Kapselung der Anmeldeüberprüfung

Jetzt müssen wir eine Methode schreiben, um die gerade festgelegten Eigenschaften zu überprüfen. Erstellen Sie also eine Datei permission.js im Verzeichnis src und kapseln Sie sie.

思路是這樣的： Zuerst fangen wir die Anfrage ab und erhalten den Parameter requireAuth in der Anfrage. Wenn der Parameter wahr ist, erhalten wir das Token im Browser, um zu überprüfen, ob der aktuelle Status angemeldet ist. Wenn ein Token vorhanden ist, wird die Anforderung zugelassen. Wenn kein Token vorliegt, wird die Anforderung auf die Anmeldeseite umgeleitet.

注意： Wenn Sie sich mit einer anderen Authentifizierung anmelden, können Sie
//Holen Sie sich das lokale Token
const token = ocalStorage.getItem("token")
Ändern Sie Ihre Überprüfungsmethode, aber die Idee ist dieselbe.

Der Code lautet wie folgt:

/**
 * Fordern Sie eine Anmeldebestätigung an. Wenn Sie nicht angemeldet sind, können Sie nicht auf die Seite zugreifen und zur Anmeldeseite zurückkehren*/
Router aus "./router" importieren;

//Routenbeurteilungsanmeldung gemäß den Parametern der Routing-Konfigurationsdatei router.beforeEach((to,from,next)=>{
    //Bestimmen Sie, ob für die Route eine Anmeldeberechtigung erforderlich ist.//record.meta.requireAuth ist der in der Anfrage enthaltene Parameter, wenn (to.matched.some(record => record.meta.requireAuth)){
        //Holen Sie sich das lokale Token
        const token = localStorage.getItem("token")
        console.log("Token anzeigen----------: " + token)

        // Beurteilen Sie, ob das aktuelle Token vorhanden ist, dh das für die Anmeldung verwendete Token
        wenn (Token) {
            //Wenn es auf die Anmeldeseite verweist, nichts tun, if (to.path === "/login"){

            }anders {
                //Wenn es keine Anmeldeseite ist und das Token vorhanden ist, geben Sie next() frei
            }
        }anders {
        // Wenn das Token nicht existiert // Weiter mit der Anmeldung next({path:'/login'})
        }

    }anders {
        //Wenn keine Login-Authentifizierung erforderlich ist, greifen Sie direkt auf next() zu
    }
})

最后別忘了將該頁面引入到mian.js中。

//Importiere permission.js, Benutzer führen Front-End-Berechtigungskontrolle durchimportiere "./permission"

Um zusammenzufassen

Die Hauptoperationen sind der dritte und vierte Schritt. Solange Sie die Parameter für die Anmeldeüberprüfung in der Anforderungsroute festlegen, schreiben Sie im vierten Schritt die Anmeldeabfangüberprüfung und fügen Sie sie in die Datei main.js ein. Das war's!

An diesem Punkt wird das Abfangen der Anmeldung durch die Front-End-Verifizierung abgeschlossen.

Damit ist dieser Artikel mit der ausführlichen Erläuterung der Idee zum Einrichten der Funktion zum Abfangen der Anmeldeüberprüfung in Vue abgeschlossen. Weitere relevante Inhalte zum Abfangen der Anmeldungsüberprüfung in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!