So bedienen Sie die autorisierte Vue-WeChat-Anmeldung

Dieses Mal zeige ich Ihnen, wie Sie die autorisierte Anmeldung bei vue WeChat durchführen.

Hintergrund

Vue Front-End- und Back-End-Trennung WeChat-Autorisierung

Szenario

Die App gibt Produkte an WeChat Moments weiter oder teilt sie mit WeChat-Freunden. Wenn der Benutzer auf die Seite klickt, wird die autorisierte WeChat-Anmeldung durchgeführt, um Benutzerinformationen zu erhalten.

Problem: Es gibt keine feste h5-Anwendungshomepage. Die Weiterleitungs-URL nach der Autorisierung hat Parameter und ist sehr lang.

Ich bin dumm und habe während des Entwicklungsprozesses viele Methoden ausprobiert. Das kann man jedes Mal sagen ist ein Erlebnis, in einen Brunnen zu springen.

1. Zuerst fordert das Front-End eine WeChat-Verbindung an, gibt den Code zurück und fordert dann mit dem Code die Backend-Schnittstelle an, um das Token zu erhalten. Später habe ich in den Blogs anderer Leute gesehen, dass dies nicht der Fall ist Gut, und es ist am besten, die Back-End-Schnittstelle direkt anzufordern. Dann gibt der Hintergrund die URL für den Sprung zurück. Daher wird die traditionellste Methode übernommen: Der Hintergrund gibt die URL zurück und die Rezeption springt.

async ReturnGetCodeUrl() {
  let {
    data
  } = await getWxAuth({});
  if (data.status == 200) {
    window.location.href = data.url;
    // 返回的结果
    // redirect_uri重定向的url是后台的地址，后台就是可拿到code，获取token
    // https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=***url***&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
    
  }
 },

Zu diesem Zeitpunkt trat ein Problem auf, das viele Schritte erforderte. Schließlich war es mühsam, zum Link zurückzukehren. Ich habe die Lösung online überprüft und geändert link. Als Redirect_uri-Parameter selbst sieht er so aus:

https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http:// www.xxx .com/h5/product*&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

Allerdings sieht unser Front-End-Link so aus, mit Parametern und ist super lang, was? WeChat akzeptiert möglicherweise nicht, dass ich so hässlich bin. /(ㄒoㄒ)/~~

http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4 yPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D

Ich habe diesen Plan endlich aufgegeben

3 Überlegen Sie, wie ich meine Front-End-Adresse umleiten und den Token erhalten kann

Der nächste Schritt ist die Methode, die ich verwende Jetzt ist der Fehler immer noch da. Lassen Sie mich zuerst meine Methode teilen oder Änderungen vornehmen, wenn es eine bessere Methode gibt.

Routing

Die globale Der Hook bestimmt, ob lokal ein user_token vorhanden ist, d .xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm und geben Sie dann den Autor ein. Wenn lokal ein Token vorhanden ist, das heißt, der Benutzer hat das Token zuvor autorisiert und es sind keine Benutzerinformationen in vuex vorhanden, dann erhalte ich die Benutzerinformationen und speichere sie in vuex. Ein hier aufgetretenes Problem besteht darin, dass das Token abläuft. dann werde ich
das lokale user_token löschen, window.localStorage.removeItem("user_token"); aktualisiere die Seite router.go(0); gehe es zu diesem Zeitpunkt noch einmal durch, wenn es kein Token gibt.

 router.beforeEach((to, from, next) => {
   //  第一次进入项目
   let token = window.localStorage.getItem("user_token");
   
   if (!token && to.path != "/author") {
    window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的url
    next("/author");
    return false;
   } else if (token && !store.getters.userInfo) {
   //获取用户信息接口
    store
     .dispatch("GetUserInfo", {
      user_token: token
     })
     .catch(err => {
      window.localStorage.removeItem("user_token");
      router.go(0);
      return false;
     });
   }
   next();
  });

Das Folgende ist die Logik der ersten Eingabe von author.vue, www.xxxx.com/h5/author, und bestimmen Sie, ob der Link einen Token-Parameter hat WeChat-Autorisierung, dann wird der Hintergrund neu gestartet und das Token übertragen, z. B.: www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200

<template>
  <p>
授权中。。。
  </p>
</template>
<script>
 
  import {
   getWxAuth
  } from '@/service/getData'
  import {
   GetQueryString 
  } from '@/utils/mixin';
  export default {
   data() {
     return {
      token: '',
     };
   },
   computed: {
    
   },
   created() {
     this.token = window.localStorage.getItem("user_token");
     //判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url
     //就是前面说的ReturnGetCodeUrl方法
 
     if (!GetQueryString("token")) {
      this.ReturnGetCodeUrl();
     } else {
      //如果有token，如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200，这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author，并携带的参数。这样就可以拿到我们想要的token了
      //判断一下后台返回的状态码msg，因为可能出现微信拿不到token的情况
      let msg = GetQueryString("msg")
      if (msg = 200) {
        this.token = GetQueryString("token");
        //存储token到本地
        window.localStorage.setItem("user_token", this.token);
        //获取beforeLoginUrl，我们的前端页面
        let url = window.localStorage.getItem("beforeLoginUrl");
        //跳转
        this.$router.push(url);
        //删除本地beforeLoginUrl
        removeLocalStorage("beforeLoginUrl");
      }else{
      //msg不是200的情况，可能跳到404的错误页面
      }
     }
   },
   methods: {
    
     async ReturnGetCodeUrl() {
      let {
        data
      } = await getWxAuth({});
      if (data.status == 200) {
       
        window.location.href = data.url;
      }
     },
     
   },
   watch: {},
   components: {},
   mounted: function () {}
  }
</script>
<style lang=&#39;scss&#39; scoped>
</style>

GetQueryString-Methode

mixin.js

export const GetQueryString = name => {
 var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var newUrl = window.location.search.substr(1).match(url);
 if (newUrl != null) {
  return unescape(newUrl[2]);
 } else {
  return false;
 }
};

Ob Sie es glauben oder nicht: Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung der ausgewählten integrierten Komponente von Vue

Erneutes Rendern vermeiden bei Verwendung von React

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die autorisierte Vue-WeChat-Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!