vue實作微信授權登入步驟詳解

這次帶給大家vue實作微信授權登入步驟詳解，vue實作微信授權登入的注意事項有哪些，以下就是實戰案例，一起來看一下。

背景

vue前後端分離開發微信授權

#場景

app將商品分享到微信朋友圈或分享給微信好友，使用者點擊頁面時進行微信授權登陸，取得使用者資訊。

問題：沒有固定的h5應用程式首頁。授權後重定向url帶參數並且很長

本人愚鈍，開發過程中，嘗試過很多方法，踩坑不足以形容我的心情，可以說每一次都是一次跳井的體驗啊。

1.一開始是前端請求微信連接，返回code，然後code作為再去請求後台接口獲取token，後面看到別人的博客說這個方法不好，最好就是直接請求後台接口，然後後台回到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.這時候就出現一個問題，微信授權要跳跳跳，最終想回到第一次點進來時候的鏈接就蛋疼了，從網上查了一下解決方法，將鏈接本身作為redirect_uri參數，大概就是這個樣子

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

然而我們的前台連結是這個鬼樣子的，本身帶參數，而且超長，what？微信可能不會接受我長這麼醜。 /(ㄒoㄒ)/~~

http://www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwmyipkHr8AQCv- hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnavWuzOYXZVAIFTw1OsWSKqgu3VaCmaKSerBnaAKP232F445F4F45F45F45F45F4F45F45F4F45F45F4F45F45F45F45F45Fp zp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU//MaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3UlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3UlzWamyPnv0vMizu8uh0ItpJOQUV1m/temF3U

最終放棄了這個方案

3.考慮如何重定向我的前台地址，並且獲取token

接下來就是我現在用的方法，bug還有很多，先分享我的方法，後期優化或有更好的方法再做修改

在main.js中
路由全域鉤子判斷本地是不是有user_token，也就是微信授權後回傳的token，如果沒有token，而且目前的路由不是author（專門為了授權而生的頁面），那就保存當前的url，例如www.xxx.com/h5/product?id=6RedfM5O4xeyl0AmOwm，然後進入author。那如果本地有token，就是用戶之前授權拿到過token並且vuex裡沒有用戶信息，那我就獲取用戶信息並保存在vuex中，這裡遇到一個問題就是token會出現過期的情況，那我就刪除了本地的user_token，window.localStorage.removeItem("user_token");刷新頁面router.go(0);這時候就重新走了一遍如果沒有token的情況。

 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的邏輯,第一次進入author， www.xxxx.com/h5/author，判斷連結有沒有token參數，如果沒有就跳微信授權，然後後台會重定向回來並攜帶token，如： 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方法

#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實作驗證碼倒數功能

axios出現302狀態碼怎麼處理
#

以上是vue實作微信授權登入步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！