Explication détaillée des étapes pour mettre en œuvre la connexion autorisée WeChat dans vue

Cette fois, je vais vous donner une explication détaillée des étapes pour mettre en œuvre la connexion autorisée WeChat avec Vue Quelles sont les précautions pour que Vue implémente la connexion autorisée WeChat Voici un cas pratique, prenons un. regarder.

Contexte

Vue développement de la séparation front-end et back-end Autorisation WeChat

Scénario

L'application partage des produits sur WeChat Moments ou les partage avec des amis WeChat. Lorsque l'utilisateur clique sur la page, la connexion autorisée WeChat est effectuée pour obtenir des informations sur l'utilisateur.

Problème : Il n'y a pas de page d'accueil fixe de l'application h5. L'URL de redirection après autorisation a des paramètres et est très longue

Je suis stupide et j'ai essayé de nombreuses méthodes pendant le processus de développement. Piétiner le piège ne suffit pas à décrire mon humeur. est une expérience de sauter dans un puits.

1. Au début, le front-end demande une connexion WeChat, renvoie le code, puis utilise le code pour demander à l'interface backend d'obtenir le jeton. Plus tard, j'ai vu des blogs d'autres personnes dire que cette méthode n'existait pas. bien, et il est préférable de demander directement l'interface backend. Ensuite, l'arrière-plan renvoie l'URL pour le saut, donc la méthode la plus traditionnelle est adoptée, l'arrière-plan renvoie l'URL et le premier plan saute.

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
    
  }
 },

2. À ce moment-là, un problème est survenu. L'autorisation WeChat a nécessité de nombreuses étapes. Finalement, il était pénible de revenir sur le lien lorsque j'ai cliqué pour la première fois. solution sur Internet. Utilisez le lien lui-même comme paramètre redirect_uri, qui ressemble probablement à ceci

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

Cependant, notre lien frontal ressemble à ceci, avec des paramètres et c'est super long, quoi ? WeChat n'acceptera peut-être pas que je sois si moche. /(ㄒoㄒ)/~~

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

J'ai finalement abandonné ce plan

3. Réfléchissez à la façon de rediriger mon adresse frontale et d'obtenir le jeton

L'étape suivante est la méthode que j'utilise. maintenant, le bug est toujours là. Il y en a beaucoup. Laissez-moi d'abord partager ma méthode, je l'optimiserai plus tard ou j'apporterai des modifications s'il existe une meilleure méthode
Dans main.js, Routage Le global. hook détermine s'il existe un user_token localement, c'est-à-dire après l'autorisation WeChat. Dans le jeton renvoyé, s'il n'y a pas de jeton et que la route actuelle n'est pas l'auteur (une page spécifiquement conçue pour l'autorisation), alors enregistrez l'URL actuelle, telle que www .xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm, puis saisissez l'auteur. S'il existe un jeton localement, c'est-à-dire que l'utilisateur a préalablement autorisé le jeton et qu'il n'y a aucune information utilisateur dans vuex, alors j'obtiendrai les informations utilisateur et les enregistrerai dans vuex. Un problème rencontré ici est que le jeton expirera, alors je vais Supprimer le user_token local, window.localStorage.removeItem("user_token"); actualiser la page 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();
  });

Voici la logique de saisie de author.vue. Entrez l'auteur pour la première fois, www.xxxx.com/h5/author, déterminez si le lien a un paramètre de jeton, sinon, sautez. à l'autorisation WeChat, puis au backend. Il redirigera vers l'arrière et transportera le jeton, tel que : 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>

Méthode GetQueryString

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;
 }
};

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Vue implémente la fonction de compte à rebours du code de vérification

Comment gérer le code d'état 302 lorsqu'axios apparaît

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!