這篇文章主要介紹了vue中微信授權(quán)登錄的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出永新免費做網(wǎng)站回饋大家。

背景

vue前后端分離開發(fā)微信授權(quán)

場景

app將商品分享到微信朋友圈或者分享給微信好友，用戶點擊頁面時進行微信授權(quán)登陸，獲取用戶信息。

問題：沒有固定的h6應(yīng)用首頁。授權(quán)后重定向url帶參數(shù)并且很長

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

1.一開始是前端請求微信連接，返回code，然后code作為再去請求后臺接口獲取token，后面看到別人的博客說這個方法不好，最好就是直接請求后臺接口，然后后臺返回url做跳轉(zhuǎn)，所以就采用了最傳統(tǒng)的方法，后臺返回url，前臺跳轉(zhuǎn)。

async ReturnGetCodeUrl() {
  let {
    data
  } = await getWxAuth({});
  if (data.status == 200) {
    window.location.href = data.url;

    // 返回的結(jié)果
    // redirect_uri重定向的url是后臺的地址，后臺就是可拿到code，獲取token
    // https://open.weixin.qq.com/connect/oauth3/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=***url***&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
    
  }
 },

2.這個時候就出現(xiàn)一個問題，微信授權(quán)要跳跳跳，最終想回到第一次點進來時候的鏈接就蛋疼了，從網(wǎng)上查了一下解決方法，將鏈接本身作為redirect_uri參數(shù)，大概就是這個樣子

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

然而我們的前臺鏈接是這個鬼樣子的，本身帶參數(shù)，而且超長，what？微信可能不會接受我長這么丑。/(ㄒoㄒ)/~~

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

最終放棄了這個方案

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

接下來就是我現(xiàn)在用的方法，bug還有很多，先分享一下我的方法，后期優(yōu)化或有更好的方法再做修改
在main.js中路由全局鉤子判斷本地是不是有user_token，也就是微信授權(quán)后返回的token，如果沒有token，并且當前的路由不是author（專門為了授權(quán)而生的頁面），那就保存當前的url，比如www.xxx.com/h6/product?id=6RedfM5O4xeyl0AmOwm，然后進入author。那如果本地有token，就是用戶之前授權(quán)拿到過token并且vuex里沒有用戶信息，那我就獲取用戶信息并保存在vuex中，這里遇到一個問題就是token會出現(xiàn)過期的情況，那我就刪除了本地的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/h6/author，判斷鏈接有沒有token參數(shù)，如果沒有就跳微信授權(quán)，然后后臺會重定向回來并攜帶token，如： www.xxxx.com/h6/author?token=xxxxxxxxx&msg=200

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue中微信授權(quán)登錄的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標題：vue中微信授權(quán)登錄的示例分析-創(chuàng)新互聯(lián)
標題URL：http://weahome.cn/article/diippi.html