vue WeChat 인증 로그인 작동 방법

이번에는 vue 위챗 인증로그인 조작방법과, vue 위챗 인증로그인 실행시 주의사항에 대해 알려드리겠습니다.

Background

vue는 WeChat 인증을 위해 프런트엔드와 백엔드 개발을 분리합니다

Scenario

app은 사용자가 페이지를 클릭하면 WeChat Moments 또는 WeChat 친구에게 제품을 공유합니다. 사용자 정보를 얻기 위해.

문제: 고정된 h5 애플리케이션 홈페이지가 없습니다. 인증 후 리다이렉트 URL이 너무 길어요

개발 과정에서 여러 가지 방법을 시도했지만 매번 제 기분을 표현하기에는 부족하다고 할 수 있습니다. 우물에 뛰어드는 체험.

1. 처음에는 프런트 엔드에서 WeChat 연결을 요청하고 코드를 반환한 다음 이 코드를 사용하여 백엔드 인터페이스에 요청하여 토큰을 얻습니다. 나중에 이 방법이 좋지 않다고 말하는 것을 보았습니다. 백엔드 인터페이스를 직접 요청한 다음 백엔드에서 URL을 반환하는 것이 가장 좋습니다. 점프를 하기 위해 우리는 백그라운드에서 URL을 반환하고 전경에서 점프하는 가장 전통적인 방법을 사용했습니다.

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. 이때 문제가 발생합니다. WeChat 인증에는 많은 호핑이 필요합니다. 결국 인터넷에서 처음 클릭했을 때 링크로 돌아가는 것이 고통스럽습니다. 링크 자체를 리디렉션 매개변수로 사용했습니다. 아마도 다음과 같습니다

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

하지만 우리의 프런트엔드 링크는 매개변수가 포함되어 있고 매우 길어요. 뭐죠? WeChat은 내가 너무 못생겼다는 사실을 받아들이지 않을 수도 있습니다. /(ㄒoㄒ)/~~

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

결국 포기 이 솔루션에 대해

3. 프런트 엔드 주소를 리디렉션하고 토큰을 얻는 방법을 고려하세요

다음 단계는 제가 지금 사용하는 방법입니다. 아직 버그가 많습니다. 나중에 최적화하겠습니다. 또는 더 나은 방법을 찾으세요.
in main.js routing 전역 후크를 수정하여 로컬에 user_token이 있는지 확인하세요. 이는 WeChat 인증 후 반환되는 토큰입니다. 토큰이 없고 현재 경로가 작성자가 아닌 경우. 인증을 위해 특별히 설계됨) 그런 다음 현재 URL(예: www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm)을 저장하고 작성자를 입력합니다. 로컬에 토큰이 있는 경우, 즉 사용자가 이전에 토큰을 승인했고 vuex에 사용자 정보가 없는 경우 사용자 정보를 가져와 vuex에 저장합니다. 여기서 발생하는 문제는 토큰이 만료된다는 것입니다. 그런 다음 로컬 user_token, window.localStorage.removeItem("user_token")을 삭제하고, 이때 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();
  });

author.vue에 처음 진입하는 로직은 www.xxxx.com/h5/author이며, 링크에 토큰 매개변수가 있는지 확인하고, 그렇지 않은 경우 WeChat 인증으로 이동합니다. 그러면 배경이 다시 리디렉션되어 다음과 같은 토큰을 전달합니다: www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200

<template>
  <p>
授权中。。。
  </p>
</template>
<script>
 
  import {
   getWxAuth
  } from &#39;@/service/getData&#39;
  import {
   GetQueryString 
  } from &#39;@/utils/mixin&#39;;
  export default {
   data() {
     return {
      token: &#39;&#39;,
     };
   },
   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>
</style>

GetQueryString method

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

읽으신 후 이 방법을 마스터하신 것 같습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 온라인에서 PHP 중국어 관련 기사를 주목하세요!

추천 도서:

vue의 내장 구성요소 선택을 사용하는 단계에 대한 자세한 설명

React 사용 시 재렌더링 방지

위 내용은 vue WeChat 인증 로그인 작동 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!