So bleiben Sie in uniapp angemeldet

So bleiben Sie bei Uniapp angemeldet

Uniapp ist ein plattformübergreifendes Entwicklungsframework auf Basis von Vue.js, mit dem plattformübergreifende Anwendungen wie iOS, Android und H5 entwickelt werden können. Bei der Entwicklung tatsächlicher Projekte war die Aufrechterhaltung des Anmeldestatus bei Problemen wie Anmeldung, Abmeldung und Dateninteraktion immer eine Schwierigkeit. Im Folgenden stellen wir vor, wie Uniapp den Anmeldestatus unter verschiedenen Aspekten verwaltet.

1. Anmelden und Authentifizierungsinformationen speichern

In der tatsächlichen Entwicklung müssen wir uns zuerst anmelden, bevor wir andere Vorgänge ausführen können. Wenn sich der Benutzer anmeldet, gibt der Server Authentifizierungsinformationen (z. B. Token) an den Client zurück. Nachdem der Client die Authentifizierungsinformationen erhalten hat, muss er diese für nachfolgende Dateninteraktionsvorgänge speichern. Uniapp bietet Methoden zum Speichern von Authentifizierungsinformationen, die in Uni-Storage- oder Uni-App-Globalobjekten gespeichert werden können.

uni.setStorageSync('token', res.data.token); // uni-storage storage
uni.$app.globalData.token = res.data.token; // uni-app globaler Objektspeicher

2. Automatische Anmeldung

Wenn der Benutzer die App schließt und dann öffnet, möchten wir uns automatisch anmelden können, ohne uns jedes Mal manuell anmelden zu müssen. Um eine automatische Anmeldung zu erreichen, können wir beim Öffnen der Anwendung eine Authentifizierungsbeurteilung durchführen, um festzustellen, ob Sie angemeldet sind. Wenn Sie sich bereits angemeldet haben, gehen Sie zur Hauptseite, andernfalls gehen Sie zur Anmeldeseite. Das Folgende ist der Beispielcode:

async onLaunch() {

const token = uni.getStorageSync('token');
if (token) {
    // 已经登录，获取用户信息，进入主页面
    try {
        const userInfo = await getUserInfo(token);
        store.commit('setUserInfo', userInfo);
        uni.switchTab({
            url: '/pages/home/home'
        });
    } catch (e) {
        console.log(e);
    }
} else {
    // 未登录，进入登录页面
    uni.reLaunch({
        url: '/pages/login/login'
    });
}

}

3. Interceptor

Interceptor kann zum Verarbeiten des Anforderungsprozesses wie Filterung, Umleitung usw. verwendet werden. Wir können einen Interceptor verwenden, um festzustellen, ob die aktuell angeforderte Schnittstelle eine Anmeldeauthentifizierung erfordert. Wenn ja, stellen Sie fest, ob Sie bereits angemeldet sind. Wenn Sie bereits angemeldet sind, fügen Sie Authentifizierungsinformationen hinzu, andernfalls springen Sie zur Anmeldeseite.

Hier ist der Beispielcode für den Interceptor:

// Fügen Sie den Interceptor vor der Anfrage hinzu
uni.addInterceptor({

// 请求前拦截
invoke(request) {
    const token = uni.getStorageSync('token');
    // 判断接口是否需要登录认证
    if (request.header.Authorization === 'Bearer ${token}') {
        // 已经登录，添加认证信息
        request.header.Authorization = 'Bearer ${token}';
    } else {
        // 未登录，跳转到登录页面
        uni.navigateTo({
            url: '/pages/login/login'
        });
    }
    // 继续请求
    return request;
},
// 响应后拦截
intercept(response, request) {
    // 处理响应结果
    return response;
}

});

4. Abmelden

Wenn sich der Benutzer abmeldet, müssen wir dies tun Löschen Sie die Speicherauthentifizierungsinformationen auf der Clientseite.

uni.removeStorageSync('token'); // Uni-Storage Clear
uni.$app.globalData.token = null; // Uni-App Global Object Clear

Summary

So bleibt Uniapp angemeldet Verfahren. Die Aufrechterhaltung des Anmeldestatus durch standardisierte Anmelde- und Authentifizierungsmethoden, automatische Anmeldung, Interceptoren und Abmeldung kann Garantien für die Anwendungssicherheit und das Benutzererlebnis bieten.

Das obige ist der detaillierte Inhalt vonSo bleiben Sie in uniapp angemeldet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!