Wie stellt uniapp fest, ob die Anmeldung des Benutzers abgelaufen ist?

Bei der Entwicklung mobiler Anwendungen sind Benutzeranmeldung und Benutzerüberprüfung wichtige Aufgaben, die die Sicherheit und Benutzererfahrung der Anwendung gewährleisten. Wenn wir Uniapp für die Entwicklung verwenden, müssen wir den Problemen bei der Benutzeranmeldung besondere Aufmerksamkeit schenken. In diesem Artikel erfahren Sie, wie Sie feststellen können, ob die Benutzeranmeldung in Uniapp abgelaufen ist, und geben relevante Codebeispiele.

1. Was ist der Ablauf der Benutzeranmeldung?

Der Ablauf der Benutzeranmeldung bezieht sich auf die Situation, in der der Benutzer innerhalb eines bestimmten Zeitraums keine Aktion ausgeführt hat und die Anmeldeinformationen recycelt werden durch den Server. Hierbei handelt es sich um eine Maßnahme des Systems, um die Sicherheit von Benutzerkonten zu gewährleisten. In Uniapp muss auch das Problem des Ablaufs der Benutzeranmeldung gelöst werden, da der Benutzer sonst die Anwendung nicht weiter verwenden kann.

2. Lösung für den Ablauf der Benutzeranmeldung in Uniapp

In Uniapp können Sie Anforderungs-Interceptoren und Antwort-Interceptoren verwenden, um das Problem des Ablaufs der Benutzeranmeldung zu lösen. Insbesondere können Sie im Anforderungs-Interceptor ein Token hinzufügen, um die Identitätsinformationen des Benutzers zu überprüfen und im Antwort-Interceptor festzustellen, ob das Token abgelaufen ist.

1. Request Interceptor

Der Request Interceptor kann das Token vor dem Senden der Anfrage erhalten und das Token zum Header hinzufügen. Auf diese Weise kann der Server bei nachfolgenden Anfragen die Identitätsinformationen des Benutzers über das Token überprüfen.

Am Beispiel von Axios können Sie den folgenden Code zum Request-Interceptor hinzufügen:

axios.interceptor.request.use(config => {
  // 从本地Storage获取Token
  const token = uni.getStorageSync('token')
  // 在Header中添加Token
  if (token) {
    config.headers.common['Authorization'] = token
  }
  return config
})

2. Response-Interceptor

#🎜 🎜 #Der Antwort-Interceptor kann das Token überprüfen, nachdem der Server das Ergebnis zurückgegeben hat. Wenn das Token abläuft, müssen Sie sich erneut anmelden und zur Anmeldeseite springen.

Am Beispiel von Axios können Sie den folgenden Code im Antwort-Interceptor hinzufügen:

axios.interceptor.response.use(response => {
  if (response.data.code === 401) {
    // Token过期，需要重新登录
    uni.showToast({
      title: '登录过期，请重新登录',
      icon: 'none'
    })
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
  return response
})

In diesem Beispiel ermittelt der Antwort-Interceptor den Code des zurückgegebenen Ergebnisses. wenn es 401 ist, dann springen Sie zur Anmeldeseite.

3. Automatisierte Verarbeitung des Ablaufs der Benutzeranmeldung

Zusätzlich zum manuellen Hinzufügen von Token können Sie das Problem des Ablaufs der Benutzeranmeldung auch automatisch über einige vom Uniapp-Framework bereitgestellte Funktionen behandeln .

Verwenden Sie vuex

Vuex ist ein Statusverwaltungstool, mit dem Sie problemlos Daten in Ihrer Anwendung speichern und abrufen können. In Uniapp kann der Benutzeranmeldestatus über Vuex gespeichert werden. Auf diese Weise kann der Benutzerstatus direkt von Vuex abgerufen werden, wenn ein Benutzerstatus erforderlich ist.

const store = new Vuex.Store({
  state: {
    isLogin: false,
    user: {}
  },
  mutations: {
    login(state, user) {
      state.isLogin = true
      state.user = user
    },
    logout(state) {
      state.isLogin = false
      state.user = {}
    }
  },
  actions: {},
  modules: {},
  getters: {}
})

In diesem Beispiel können über das Statusverwaltungstool von Vuex die beiden Status von isLogin und Benutzer gespeichert werden, um sie an anderen Orten einfach aufrufen zu können.

Plug-ins, die mit Uni-app entwickelt wurden

Uni-app stellt als plattformübergreifendes Framework viele Entwicklungs-Plug-ins zur Verfügung brauchen. Darunter befindet sich ein sehr nützliches Vuex-Persistedstate-Plug-In, mit dem Vuex-Daten im lokalen Speicher gespeichert werden können.

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: uni.getStorageSync('vuex')
    })
  ]
})

In diesem Beispiel kann der Vuex-Status über das Plug-In „vuex-persistedstate“ im lokalen Speicher gespeichert werden. Auf diese Weise bleiben die Daten weiterhin erhalten, wenn der Benutzer die App erneut öffnet.

4. Zusammenfassung

In Uniapp ist der Ablauf der Benutzeranmeldung ein sehr häufiges Problem. Durch die Verwendung der Request-Interceptor- und Response-Interceptor-Methoden sowie der Unterstützung der Plug-Ins Vuex und vuex-persistedstate können wir das Problem des Ablaufs der Benutzeranmeldung leicht lösen. Gleichzeitig kann die Lösung dieses Problems auch die Sicherheit und das Benutzererlebnis der Anwendung verbessern und muss daher ernst genommen werden.

Das obige ist der detaillierte Inhalt vonWie stellt uniapp fest, ob die Anmeldung des Benutzers abgelaufen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!