Eine kurze Analyse der Implementierungsmethode der Uniapp-Initialisierung ohne Login-Sprung

Bei der Entwicklung mit UniApp stoßen wir möglicherweise auf Seiten, für deren Eingabe sich Benutzer anmelden müssen, z. B. Einkaufswagen, Bestellseiten usw. Wie kann man also automatisch zur Anmeldeseite springen, wenn man nicht angemeldet ist? In diesem Artikel erhalten Sie eine detaillierte Einführung in die Implementierungsmethode der UniApp-Initialisierung ohne Login-Sprung.

1. Anforderungsanalyse

Fügen Sie die Anmeldefunktion zur Anwendung hinzu und aktivieren Sie sie, um beim Aufrufen der entsprechenden Seite zur Anmeldeseite zu springen, wenn Sie nicht angemeldet sind.

2. Implementierungsideen

1. Schreiben Sie den anmeldebezogenen Logikcode in die App.vue-Datei.
2. Verwenden Sie einen Routen-Interceptor, um zu überprüfen, ob der Benutzer angemeldet ist, wenn er eine Seite betritt, die eine Anmeldung erfordert. Andernfalls wird automatisch zur Anmeldeseite gesprungen.
3. Verwenden Sie Vuex, um Benutzerinformationen zu verwalten, den Anmeldestatus zu speichern und Benutzerinformationen zu übertragen.

3. Code-Implementierung

1. Anmeldelogik in App.vue hinzufügen

Wir können die Anmeldeverifizierungslogik in der erstellten Lebenszyklusfunktion in App.vue ausführen. Zum Beispiel:

created(){
    // 检查用户是否已登录
    let loginInfo = uni.getStorageSync('loginInfo') || null;
    if(loginInfo){
        this.$store.commit('saveUserInfo', loginInfo);
    }else{
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
}

Hier erhalten wir die lokal gespeicherten Anmeldeinformationen über die Methode uni.getStorageSync(). Wenn die Anmeldeinformationen vorhanden sind, übergeben Sie die Benutzerinformationen an den Vuex-Statusmanager. Andernfalls springen Sie zur Anmeldeseite.

2. Routen-Interceptor implementieren

Im Allgemeinen wird der Anmeldestatus vor dem Routensprung überprüft. Wir können einen Routen-Interceptor definieren, um relevante Vorgänge auszuführen, bevor wir zu der Seite springen, die eine Anmeldung erfordert.

Führen Sie die Route in main.js ein:

import router from './router';

und fügen Sie den Routen-Interceptor hinzu:

router.beforeEach((to, from, next) => {
    // 进入需要登录的页面前先进行登录状态检查
    let isLogin = store.getters.getLoginStatus;
    if (to.meta.requireAuth) { 
        // 如果未登录，则跳转至登录页面
        if(!isLogin){
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            });
        }else{
            next();
        }
    }else{
        next();
    }
});

Hier bestimmen wir, ob für die Seite eine Anmeldung erforderlich ist, basierend darauf, ob das Feld requireAuth in der Route markiert ist. Wenn Sie sich anmelden müssen, prüfen Sie, ob der aktuelle Benutzer angemeldet ist. Wenn nicht, springen Sie zur Anmeldeseite, andernfalls erlauben Sie den weiteren Zugriff. Wenn keine Anmeldung erforderlich ist, springen Sie direkt.

3. Implementieren Sie die Speicherung und Bereitstellung von Benutzerinformationen.

Erstellen Sie im Vuex-Statusmanager ein Modul mit dem Namen userInfo, um Benutzerinformationen zu verwalten. Wir können darin einige benutzerbezogene Getter, Mutationen und Aktionen definieren.

Definieren Sie in der Datei userInfo.js den folgenden Code:

const state = {
    userInfo: null
}

const getters = {
    getUserInfo: state => state.userInfo,
    getLoginStatus: state => state.userInfo != null
}

const mutations = {
    saveUserInfo (state, userInfo) {
        state.userInfo = userInfo;
        uni.setStorageSync('loginInfo', userInfo);
    },
    logout(state){
        state.userInfo = null;
        uni.removeStorageSync('loginInfo');
    }
}

const actions = {
    login({ commit }, userInfo) {
        // 登录操作
        commit('saveUserInfo', userInfo);
    },
    logout({ commit }){
        // 登出操作
        commit('logout');
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

Hier definieren wir Funktionen wie getUserInfo, getLoginStatus, saveUserInfo, logout und login, die auch zum Abrufen, Speichern und Löschen von Benutzerinformationen verwendet werden als Login und Login außer Betrieb simulieren. Wenn die saveUserInfo-Methode Benutzerinformationen speichert, werden diese nicht nur an den Status übergeben, sondern auch lokal gespeichert, um eine dauerhafte Speicherung zu ermöglichen.

4. Zusammenfassung

Durch die Verwendung des von UniApp bereitgestellten Routing-Interceptors und Vuex-Statusmanagers wird die Funktion des automatischen Springens zur Anmeldeseite realisiert, wenn Sie nicht angemeldet sind. Wenn Sie Anmeldedaten auf anderen Seiten verwenden müssen, müssen Sie Vuex nur in der entsprechenden Komponente einführen, was sehr praktisch ist.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Implementierungsmethode der Uniapp-Initialisierung ohne Login-Sprung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!