So erhalten Sie eine WeChat-Autorisierung und melden sich mit vue an

Dieses Mal zeige ich Ihnen, wie Vue die WeChat-Autorisierung erhält und sich anmeldet. Welche Vorsichtsmaßnahmen muss Vue treffen, um die WeChat-Autorisierung zu erhalten und sich anzumelden? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Hintergrund

Vue Front-End- und Back-End-Trennungsentwicklung 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 Backend-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 der Vordergrund 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. Ich werde sie später optimieren oder Änderungen vornehmen, wenn es eine bessere Methode gibt.
Leiten Sie den globalen Hook in main.js weiter, um festzustellen, ob ein user_token vorhanden ist lokal, das ist das nach der WeChat-Autorisierung zurückgegebene Token, und die aktuelle Route ist kein Autor (eine Seite, die speziell für die Autorisierung entwickelt wurde), dann speichern Sie die aktuelle URL, z. B. www.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 lösche ich es. Wenn das lokale user_token vorhanden ist, aktualisieren Sie die Seite router.go(0);

 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:

jQuery ermöglicht die Funktion zum Zusammenführen/Anhängen der Array-Deduplizierung

Schritte zum Importieren und Verwenden von vue-cli-Komponenten Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSo erhalten Sie eine WeChat-Autorisierung und melden sich mit vue an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!