本文用于記錄微信網(wǎng)頁(yè)授權(quán)的相關(guān)步驟以及注意點(diǎn)侥猬，避免下次又到處找資料仅政。
首先了解微信官方文檔中關(guān)于接入公眾號(hào)的大致流程（https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html）：
網(wǎng)頁(yè)授權(quán)分兩種方式：
配置好了之后垢油，在h5頁(yè)面中進(jìn)行授權(quán)操作，參考（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html）：
通常這時(shí)候會(huì)由后端將授權(quán)鏈接拼接好了返回給前端已旧，由前端進(jìn)行跳轉(zhuǎn)授權(quán)獲取code秸苗，拿到code后再將code傳給后端召娜，由后端去微信端獲取微信提供的access_token运褪，拿到之后后端將對(duì)應(yīng)的access_token存儲(chǔ)起來(lái)，用于實(shí)現(xiàn)調(diào)取微信提供的相關(guān)接口（這里不確定），再將項(xiàng)目中所需的token（或Id秸讹，根據(jù)具體項(xiàng)目情況而定）返回給前端檀咙，前端用于調(diào)用業(yè)務(wù)接口。
這里詳細(xì)解析一下前端部分在vue項(xiàng)目中的實(shí)現(xiàn)璃诀。
首先可以在App.vue中去實(shí)現(xiàn)獲取授權(quán)鏈接的操作弧可，這樣做的原因是有可能項(xiàng)目會(huì)有多個(gè)入口，比如說首頁(yè)可以進(jìn)入劣欢，某個(gè)商品的詳情頁(yè)需要進(jìn)入棕诵，這個(gè)時(shí)候如果不在App.vue中定義，那么關(guān)于微信授權(quán)的邏輯就需要在多個(gè)頁(yè)面重復(fù)編寫凿将，不是很合理校套。
具體實(shí)現(xiàn)邏輯可參考以下偽代碼：
created() {
// 獲取鏈接上的code參數(shù)
const code = this.getQueryString('code')
if (code) {
// 如果此時(shí)已經(jīng)有code，則說明這是授權(quán)后的頁(yè)面牧抵，只需要將code傳給后臺(tái)獲取對(duì)應(yīng)的業(yè)務(wù)token笛匙，類似于登錄的一個(gè)操作
} else {
// 如果沒有，則向后臺(tái)請(qǐng)求拿到授權(quán)地址犀变，
}
},
methods: {
getQueryString(name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const search = window.location.search.split('?')[1] || '';
const r = search.match(reg) || [];
return r[2];
},
}
在上面的else分支中妹孙，這里的接口可以做得更靈活一點(diǎn)，由前端提供當(dāng)前的url作為授權(quán)鏈接參數(shù)中的redirect_uri获枝，以便后面直接跳轉(zhuǎn)蠢正。
當(dāng)用戶進(jìn)入首頁(yè)時(shí)，此時(shí)的鏈接是這種格式：http://xxxxx.com/pages/draw/draw映琳，進(jìn)行微信授權(quán)后會(huì)攜帶code參數(shù)机隙，形如：http://xxxxx.com/pages/draw/draw?code=888883220000&state=，此時(shí)的state也可以根據(jù)業(yè)務(wù)需求儲(chǔ)存相關(guān)信息萨西，例如：用戶A分享一個(gè)商品有鹿，用戶B點(diǎn)擊分享出來(lái)的鏈接時(shí)，將用戶B與用戶A進(jìn)行一個(gè)關(guān)聯(lián)谎脯，此時(shí)就可以通過state進(jìn)行保存葱跋。當(dāng)然，這只是解決方法之一源梭，我曾經(jīng)做過的一個(gè)項(xiàng)目中當(dāng)時(shí)是這樣實(shí)現(xiàn)的娱俺，理論上應(yīng)該也可以通過在鏈接后拼接參數(shù)來(lái)實(shí)現(xiàn)。
當(dāng)用戶需要直接跳轉(zhuǎn)到某個(gè)商品詳情頁(yè)废麻，此時(shí)的鏈接是這種格式：http://xxxxx.com/pages/draw/draw?drawId=1荠卷，這時(shí)用戶會(huì)先進(jìn)入else流程去獲取授權(quán)鏈接，然后重定向到當(dāng)前頁(yè)面烛愧，此時(shí)進(jìn)入頁(yè)面的鏈接應(yīng)該變成這種格式：http://xxxxx.com/pages/draw/draw?drawId=1&code=888883220000&state=
注意油宜，整個(gè)過程都是沒有用到JS-SDK的掂碱。
