背景

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-hYXZVAIFTwDXOsWSKqgu3VaCmaKSerBnacvWuzO3Zwdf8y%2F2K2lvqkluV6Ane4LCAKyPU2tPAPj%2FMF6F6xkzp27GqqpNya7HbdEA34qGQJvHIA9tlIMkeEWid1112b8oZuP3FQBwU%2F%2FMaSrovzQP6LlzWamyPnv0vMizu8uh0ItpJOQUV1m%2FtemF3U9KuHo8rXCw%3D

最終放棄了這個方案

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的情況。