So lösen Sie das Problem der Trennung von Front-End und Back-End bei der autorisierten Vue WeChat-Anmeldung

In diesem Artikel wird hauptsächlich eine detaillierte und elegante Lösung für die Trennung des Front-Ends und des Back-Ends der autorisierten Vue WeChat-Anmeldung vorgestellt. Ich werde ihn jetzt als Referenz verwenden.

Die autorisierte WeChat-Anmeldung ist ein sehr häufiges Szenario. Mit der autorisierten WeChat-Anmeldung können wir leicht einige Benutzerinformationen abrufen und eine Datenbank erstellen, um die Identität des Benutzers über die eindeutige OpenID des Benutzers für das offizielle Konto zu verknüpfen.

Der Mechanismus der autorisierten WeChat-Anmeldung wird hier nicht im Detail beschrieben. Die kurze Beschreibung besteht darin, zur WeChat-Autorisierungsseite zu springen Springen Sie zu diesem Zeitpunkt zur Rückrufseite. Über den Codeparameter kann das Backend den Code für OpenID-Unterstützung oder Benutzerinformationen austauschen.

In einem Vue-Projekt ist dies der Fall Normalerweise handelt es sich um eine SPA-Anwendung, das heißt, alle Seiten sind gleich. HTML wird normalerweise mit vollständig getrenntem Front-End und Back-End entwickelt. Die reinen statischen Dateien, die nach der Vue-Verpackung generiert werden, durchlaufen möglicherweise nicht einmal den Server, daher ist dies nicht sehr der Fall Dieser Artikel stellt WeChat für solche Szenarien vor.

Für eine Vue SPA-Anwendung können wir normalerweise viele Seiten haben Konfigurieren Sie mehrere Menüs. Mehrere Menüs entsprechen der Routing-Seite von Vue, dies ist jedoch möglicherweise nicht der Fall. Für den Zugriff auf jede Seite ist eine Vorschau des Benutzers erforderlich, ohne sich anzumelden. Zu diesem Zeitpunkt können wir den Vue-Router zur Implementierung verwenden Front-End-Routing-Abfangen

 router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
  next()
 } else {
  // store已存在用户信息直接进入页面
  if (store.state.userInfo.nickname) {
   next()
   return
  }
  const code = getUrl(window.location.href).code // 截取url上的code ,可能没有,则返回''空字符串
  let res = await api.post('/imsl/user/user-auth', [code]) // 获取用户信息,后端可首先通过cookie,session等判断,没有信息则通过code获取
  console.log(res)
  // 返回用户信息
  if (res.code === 200 && res.data.is_auth) {
   store.commit('setUserInfo', res.data)
   next()
  } else {
   // 此状态根据业务需求 可能不存在
   if (res.code === 201) {
    const openid = res.data.openid
    console.log(openid)
    store.commit('setOpenid', openid)
    localStorage.setItem('openid', openid)
    next('/enlist-info')
   }
   // 上面的获取用户信息接口,如果cookie,session拿不到用户信息,且传递的code为空,则跳转到微信授权页面
   if (res.code === 202) {
    console.log(window.location.origin)
    console.log(to.fullPath)
    // 这个redirectUrl用 当前页路径或者tof.fullPath(将要进入的路径)
    let redirectUrl = window.location.href
    redirectUrl = encodeURIComponent(redirectUrl)
    console.log(redirectUrl)
    const appid='wxdff0642c2120ea39'
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   }
  }
 }
})

Der obige Code erklärt im Grunde einen Autorisierungsprozess. Wenn wir das Vue-Routing konfigurieren, legen Sie fest, ob für diese Route eine Anmeldung erforderlich ist, dh fügen Sie dem Meta des Routers ein noAuth: true-Attribut hinzu . Dies dient zur Verarbeitung von Seiten, für die keine Anmeldung erforderlich ist. Wenn keine Anmeldung erforderlich ist, geben Sie die entsprechende Seite direkt über next() ein Zu diesem Zeitpunkt schreibt das Backend eine Schnittstelle, um Benutzerinformationen abzurufen, und das Frontend ruft die Schnittstelle direkt auf, um Benutzerinformationen abzurufen Wenn in Vuex Benutzerinformationen gespeichert sind, rufen Sie die Schnittstelle zum Abrufen von Benutzerinformationen auf. Wir kehren schließlich zum Thema dieses Artikels zurück. Wie erhält das Backend zu diesem Zeitpunkt die Benutzerinformationen? Nach dem Binden der Identität kann das Backend dies tun Speichern Sie den Anmeldestatus des Benutzers, indem Sie Cookies, Token usw. festlegen. Wenn ein relevanter Status vorliegt, kann das Backend die Benutzerinformationen direkt zurückgeben. Wenn es sich um die erste Eingabe handelt oder Cookies, Token usw. abgelaufen sind, dann WeChat Zu diesem Zeitpunkt wird die Autorisierung zum Anmelden aufgerufen. Wie im obigen Code beschrieben, gibt es drei Situationen:

1 Durch Cookies, Token usw. erhält das Backend die Benutzerinformationen direkt. Rufen Sie zu diesem Zeitpunkt die Benutzerinformationen ab, geben Sie die Seite direkt ein und speichern Sie gleichzeitig die Benutzerinformationen in vuex

2. Wenn keine Benutzerinformationen vorhanden sind, gibt es kein Cookie oder Token Dieses Mal müssen Sie WeChat erneut aufrufen, um sich anzumelden. Die beiden oben angegebenen Rückgabecodes sind Code = 201 und Code = 202. Wenn Code = 2, springt das Frontend direkt zur WeChat-Autorisierungsseite und leitet Uri weiter Ist die Seite, die eingegeben werden soll, der Benutzer auf die WeChat-Autorisierungsseite gesprungen? Der Unterschied besteht darin, dass die URL bereits vorhanden ist Der Code wird durch String-Abfangen gesendet und an das Backend gesendet. Benutzerinformationen können über Code ausgetauscht werden

Das Projekt übernimmt das vollständige Front-End und Backend. Die Trennungsmethode besteht darin, die rein statischen Dateien nach dem Packen auf dem Server abzulegen.
, das Backend fängt es nicht an der Schnittstelle ab und es besteht keine Notwendigkeit, dass das Backend zur WeChat-Autorisierungs-Anmeldeseite springt. Die Implementierungsmethode ist wie folgt : 3.
Das Front-End fängt Seiten ab, für deren Eingabe eine Benutzeridentität erforderlich ist.beforeEach Hook-Funktion von Vue-Router Zu diesem Zeitpunkt wird es aufgerufen, den Benutzer abzurufen Informationsschnittstelle: Das Backend ermittelt zunächst den Benutzer, indem es Cookies, Token usw. abruft. Wenn keine relevanten Informationen vorhanden sind, wird 201 oder 202 zurückgegeben. Wenn 202 zurückgegeben wird, springt das Frontend zur WeChat-Autorisierungsseite. Die Redirecturi ist die URL von Die einzugebende Seite und die Sprungberechtigung lauten WeChat. Anschließend wird der Code auf der URL übertragen und zur aktuellen Seite zurückgekehrt. Zu diesem Zeitpunkt fängt das Front-End den Code auf der URL ab und übergibt ihn an das Back-End. Das Back-End verarbeitet den Code, um die Benutzerinformationen zu erhalten, und andere Implementierungen ermöglichen eine autorisierte Anmeldung.
Das Obige ist der gesamte Inhalt dieses Artikels Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Trennung von Front-End und Back-End bei der autorisierten Vue WeChat-Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!