So stellen Sie sicher, dass auf jeder Seite des WeChat Mini-Programms eine Anmeldung erfolgt

So stellen Sie sicher, dass auf jeder Seite des WeChat Mini-Programms eine Anmeldung erfolgt

Status Quo

In einem WeChat-Miniprogramm gibt es eine Homepage, eine persönliche Seite, einige Listenseiten, Detailseiten usw. Die meisten dieser Seiten können geteilt werden. Wenn eine freigegebene Seite von einem anderen Benutzer geöffnet wird, wie kann die Seite sicherstellen, dass der Benutzer angemeldet ist?

Im Internet gibt es viele Lösungen, die eine Interception in die Anforderungskapselung einfügen. Wenn kein Token vorhanden ist, rufen Sie die Anmeldeanforderung auf, um das Token abzurufen, bevor Sie fortfahren.

An dieser Lösung ist nichts auszusetzen. Achten Sie nur auf einen Punkt. Wenn eine Seite durch mehrere Anfragen gleichzeitig ausgelöst wird, werden alle Anfragen, nachdem sie abgefangen wurden, in einem Array abgelegt. Nachdem Sie das Token erfolgreich erhalten haben, durchlaufen Sie das Array und die Anfragen nacheinander.

Wenn die Anforderungen jedoch etwas komplizierter sind, z. B. bei einer App einer Supermarktkette, müssen die meisten Seiten ein Geschäft haben (da der Lagerbestand, der Preis usw. der Produkte des aktuellen Geschäfts basierend auf dem Geschäft ermittelt werden müssen). Dieses Geschäft wird durch Aufrufen der Backend-Schnittstelle basierend auf dem aktuellen Standort abgerufen. Zu diesem Zeitpunkt wäre es zu mühsam, es in die Anforderung einzukapseln.

Lösung

Zunächst haben wir festgestellt, dass die Anmeldung, das Abrufen des Standorts und unsere Seitenanforderung asynchron erfolgen. Wir müssen sicherstellen, dass die Seitenanforderung nach der Anmeldung und dem Abrufen des Standorts erfolgt. Wenn wir dies jedoch für jede Seite schreiben, ist die Wartbarkeit zu schlecht. Wir können also eine Methode extrahieren, um dies zu tun.

Der Code lautet also:

const app = getApp()
Seite({
  Daten: {
    Protokolle: []
  },
  beim Laden() {
    app.commonLogin(()=>{
        // Seitenanforderung verarbeiten })
  }
})

Es scheint, dass unser Problem hier gelöst wurde. Überlegen Sie es sich jedoch noch einmal: Wenn Sie mehr tun möchten, z. B. eine einheitliche Verarbeitung von onShareAppMessage für jede Seite, dies aber nicht für jede Seite erneut schreiben möchten und für jede Seite selbst eine Überwachung implementieren möchten, wie geht das?

Weitere Lösungen

Wir können sehen, dass im WeChat-Applet jede Seite eine Seite () ist. Wir können also eine Hülle an die Außenseite dieser Seite anfügen und diese Seite durch eine MyPage ersetzen. Ohne weitere Umschweife ist hier der Code:

Tool.js-bezogener Code

/**
   * Merge-Parameter verarbeiten */
  handlePageParamMerge(arg) {
    let numargs = arg.length; // Den Wert des übergebenen Parameters abrufen.
    lass Daten = {}
    let Seite = {}
    für (lass ix in arg) {
      lass Element = arg[ix]
      wenn (Artikel.Daten && Typ von (Artikel.Daten) === 'Objekt') {
        Daten = Objekt.Zuweisen(Daten, Element.Daten)
      }
      wenn (Element.Methoden && Typ von (Element.Methoden) === 'Objekt') {
        Seite = Objekt.Zuweisen(Seite, Element.Methoden)
      } anders {
        Seite = Objekt.Zuweisen(Seite, Element)
      }
    }
    page.data = Daten
    Zurück zur Seite
  }

  /***
   * Seitenmethoden und Daten zusammenführen, kompatibel mit {data:{}, methods:{}} oder {data:{}, a:{}, b:{}}
   */
  mergePage() {
    gib dies zurück.handlePageParamMerge(Argumente)
  }

  /**
   * Zusammenführen von Komponentenparametern wird verarbeitet */
  handleCompParamMerge(arg) {
    let numargs = arg.length; // Den Wert des übergebenen Parameters abrufen.
    lass Daten = {}
    let Optionen = {}
    let Eigenschaften = {}
    let Methoden = {}
    lass comp = {}
    für (lass ix in arg) {
      lass Element = arg[ix]
      // Die Anfangsdaten der Komponente zusammenführen if (item.data && typeof (item.data) === 'object') {
        Daten = Objekt.Zuweisen(Daten, Element.Daten)
      }
      // Komponenteneigenschaftslisten zusammenführen if (item.properties && typeof (item.properties) === 'object') {
        Eigenschaften = Objekt.zuweisen(Eigenschaften, Element.Eigenschaften)
      }
      // Liste der Methoden für kombinierte Komponenten if (item.methods && typeof (item.methods) === 'object') {
        Methoden = Objekt.assign(Methoden, Element.Methoden)
      }
      wenn (Element.Optionen && Typ von (Element.Optionen) === 'Objekt') {
        Optionen = Objekt.Zuweisen(Optionen, Element.Optionen)
      }
      comp = Objekt.assign(comp, item)
    }
    comp.data = Daten
    comp.options = Optionen
    comp.properties = Eigenschaften
    comp.methods = Methoden
    Rückgabekompensation
  }

  /**
   * Komponenten-Mixin {Eigenschaften: {}, Optionen: {}, Daten: {}, Methoden: {}}
   */
  mergeComponent() {
    gib dies zurück.handleCompParamMerge(Argumente)
  }

  /***
   * Eine Seite mit Überwachung synthetisieren */
  neueSeite() {
    let-Optionen = this.handlePageParamMerge(Argumente)
    lass das = dies
    let app = getApp()

    //Globale Klick-Login-Beurteilung hinzufügen, wenn (!options.publicCheckLogin){
      options.publicCheckLogin = Funktion (e) {
        let Seiten = getCurrentPages()
        let page = Seiten[Seitenlänge - 1]
        let Datensatz = e.currentTarget.dataset
        let callback = null

        //Callback-Methode abrufen, wenn (dataset.callback && typeof (page[dataset.callback]) === "function"){
          Rückruf = Seite[Datensatz.Rückruf]
        }
        // console.log('Rückruf>>', Rückruf, app.isRegister())
        //Beurteilen, ob eine Anmeldung erfolgen soll, if (callback && app.isRegister()){
          Rückruf(e)
        }
        anders{
          wx.navigateTo({
            URL: '/Seiten/Anmelden/Anmelden'
          })
        }
      }
    }

    const { onLoad } = Optionen
    Optionen.beimLaden = Funktion (Argument) {
      Optionen.watch und das.setWatcher(dies)
      beim Laden und beim Laden.call(dieses, arg)
    }

    const { onShow } = Optionen
    Optionen.onShow = Funktion (Argument) {
      wenn (options.data.noAutoLogin || app.isRegister()) {
        beiAnzeigen und beiAnzeigen.call(dieses, arg)
        //Seiteneinbettung app.ga({})
      }
      anders {
        wx.navigateTo({
          URL: '/Seiten/Anmelden/Anmelden'
        })
      }
    }

    Seite zurückgeben (Optionen)
  }

  /**
   * Komponenten mit Uhren usw. synthetisieren */
  neueKomponente() {
    let-Optionen = this.handleCompParamMerge(Argumente)
    lass das = dies
    const { bereit } = Optionen
    options.ready = Funktion (Argument) {
      Optionen.watch und das.setWatcher(dies)
      bereit und bereit.call(dieses, arg)
    }
    Komponente zurückgeben (Optionen)
  }

  /**
    * Listener einrichten */
  setWatcher(Seite) {
    let data = Seite.Daten;
    lass watch = Seite.watch;
    Objekt.Schlüssel(watch).forEach(v => {
      let key = v.split('.'); // Teile die Attribute in watch mit '.' in ein Array auf. let nowData = data; // Weise Daten nowData zu.
      for (let i = 0; i < key.length - 1; i++) { // Durchlaufe alle Elemente des Schlüssel-Arrays, außer dem letzten!
        nowData = nowData[Schlüssel[i]]; // Zeigen Sie nowData auf sein Schlüsselattributobjekt}

      let letzterSchlüssel = Schlüssel[Schlüssellänge - 1];
      // Angenommen key==='my.name', nowData===data['my']===data.my, lastKey==='name'
      let watchFun = watch[v].handler || watch[v]; // Kompatibel mit sowohl mit als auch ohne Handler let deep = watch[v].deep; // Wenn deep nicht gesetzt ist, ist es undefiniert
      this.observe(nowData, lastKey, watchFun, deep, page); //Überwache den lastKey des nowData-Objekts
    })
  }

  /**
   * Attribute überwachen und Überwachungsfunktionen ausführen */
  beobachten(Objekt, Schlüssel, Spaß beobachten, tief, Seite) {
    var val = obj[Schlüssel];
    //Überprüfen Sie, ob deep wahr ist und val nicht leer sein kann und typeof val==='object' (Änderungen der Werte im Array erfordern ebenfalls eine gründliche Überwachung)
    wenn (deep && val != null && typeof val === 'Objekt') {
      Object.keys(val).forEach(childKey => { // Durchlaufe jeden Schlüssel unter dem Val-Objekt
        this.observe(val, childKey, watchFun, deep, page); // Überwachungsfunktion rekursiv aufrufen})
    }
    var das = dies;
    Objekt.defineProperty(Objekt, Schlüssel, {
      konfigurierbar: true,
      aufzählbar: wahr,
      set: Funktion (Wert) {
        wenn (val === Wert) {
          zurückkehren
        }
        // Aufruf mit dem Seitenobjekt, ändere den this-Zeiger in der Funktion, damit this.data auf den Eigenschaftswert in data zugreifen kann watchFun.call(page, value, val); // value ist der neue Wert, val ist der alte Wert val = value;
        if (deep) { // Wenn es sich um eine tiefe Überwachung handelt, hören Sie das Objekt erneut ab, um seine Eigenschaften zu überwachen.
          das.beobachten(Objekt, Schlüssel, watchFun, tief, Seite);
        }
      },
      erhalten: Funktion () {
        Rückgabewert;
      }
    })
  }

Seitencode:

app.tool.neueSeite({
  Daten: {
    // noAutoLogin: false
  },
  onShow: Funktion () {
    //Schreiben Sie hier die Seitenanforderungslogik}
}

endlich

Der Code läuft schon seit längerem online. Das newPage-Paket im Tool kann nach Bedarf hinzugefügt werden. Kurz gesagt, ich gebe hier nur eine Denkweise wieder. Wenn Sie eine bessere haben, teilen Sie sie uns gerne mit.

Damit ist dieser Artikel darüber, wie WeChat Mini-Programme sicherstellen, dass jede Seite angemeldet ist, abgeschlossen. Weitere relevante Inhalte dazu, wie WeChat Mini-Programme Seitenanmeldungen sicherstellen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • WeChat Mini-Programme - Detaillierte Erklärung der WeChat-Anmeldung, WeChat-Zahlung und Vorlagennachrichten
  • Detaillierte Einführung in den Anmeldevorgang des WeChat Mini-Programms
  • Implementierungscode der Anmelderegistrierungsfunktion des WeChat-Applets
  • Das WeChat-Applet implementiert einen Beispielcode für die Anmeldung mit Gesichtserkennung
  • Das WeChat-Applet ruft den WeChat-Login auf, um OpenID und Java als Serverbeispiel abzurufen.
  • Beispiel für PHP-Quellcode für die automatische Anmeldung beim WeChat-Applet (Quellcode-Download)
  • WeChat-Applet-Autorisierungsanmeldung und jeweils Überprüfung, ob Autorisierungsinstanzcode
  • Scannen Sie den WeChat-Applet-Code, um sich auf der Website anzumelden und Analysen durchzuführen
  • Detaillierte Erläuterung der Benutzerautorisierungsanmeldung für die WeChat-Applet-Entwicklung

<<:  Fehler beim reduzierten Tabellenzeilenelement

>>:  Detaillierte Erläuterung der Mysql-Funktionsaufrufoptimierung

Artikel empfehlen

MySQL Series 11-Protokollierung

Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...

Zwei Abfragemethoden, wenn der MySQL-Abfragefeldtyp JSON ist

Die Tabellenstruktur ist wie folgt: Ich würde var...

Kontinuierliche Bereitstellung mit Jenkins und Docker unter Docker

1. Was ist Continuous Delivery Der Ausgabeprozess...

Nginx beschränkt den IP-Zugriff auf bestimmte Seiten

1. Um allen IP-Adressen den Zugriff auf die drei ...

MySQL ruft die aktuelle Datums- und Uhrzeitfunktion ab

Holen Sie sich das aktuelle Datum + die aktuelle ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 winx64

Das grafische Tutorial zur Installation und Konfi...

Beispiele für die Verwendung temporärer Tabellen in MySQL

Ich war in den letzten beiden Tagen etwas beschäf...

Detaillierte Erläuterung der 4 gängigen Datenquellen in Spark SQL

Allgemeine Lade-/Schreibmethoden Optionen manuell...

【HTML-Element】So betten Sie Bilder ein

Mit dem img-Element können wir Bilder in HTML-Dok...

Prinzip des Ladens von Docker-Images

Inhaltsverzeichnis Docker-Images Was ist ein Spie...

Zusammenfassung mehrerer APIs oder Tipps in HTML5, die Sie nicht verpassen sollten

In früheren Blogbeiträgen habe ich mich auf einige...