vue微信受權解決方案（第三次優化）

github:vue-wechat-auth

以前是本身太年輕，寫什麼【最終解決方案】。這一次的項目vue移動端電商項目，作了不少的優化。你們都知道受權須要每次都要發佈到線上，本地的須要代理，這讓咱們很頭疼。後面會介紹一個本地直接受權的方式，真的超級香。

時隔幾年，第三次升級個人微信受權，每一次思路都更加清晰，當個人知識愈來愈廣，愈來愈深，我相信會有第四次，第五次。。。

另外也優化：

• 微信分享
• keep-alive返回到上次瀏覽的位置
• vue-router 全部頁面攜帶參數
• ...

後續會持續分享，接下來首先優化的就是受權邏輯的優化。

場景

整個項目不管什麼頁面進入都須要進行受權，通常微信公衆號H5項目這一點都是須要作到

接下來咱們開始吧，先克隆安裝依賴，不要着急啓動，先把準備工做作好。

// 克隆項目
git clone https://github.com/sunniejs/vue-wechat-auth.git
//安裝依賴
npm install 
複製代碼

實現本地微信受權

1.工具

實現本地開發受權，你須要使用微信開發者工具，網頁是沒有辦法直接本地拿到受權的。

2.將auth.html部署到服務器上

爲何要部署auth.html呢？

實現微信受權，微信官方要你填寫一個受權回到頁面域名，受權的地址必須是這個域名，那localhost顯然是不能夠了，那怎麼辦呢？

咱們跳微信受權地址的時候redirect_uri 攜帶的地址爲符合要求的微信回調域名，好比www.abc.com/auth.html?b… 回到這個頁面的時候，咱們再跳轉到本地http://localhost:9018/#/?code=23456789**帶着咱們想要的code 就搞定了！那麼開始吧。

1. 前往微信公衆平臺->接口權限->網頁受權獲取用戶基本信息->修改，填寫受權回調頁面域名，例如www.abc.com

2. 微信要求將MP_verify_xxx.txt文件放到服務器下。按照提示操做就能夠了。

3. 部署auth.html(在github項目的根目錄下) ，相同的，將 auth.html 上傳至填寫域名或路徑指向的web服務器（或虛擬主機）的目錄（ 例如 ：**www.abc.com/auth.html**…

在www.abc.com域名下的服務器上部署auth.html，不必定是根目錄，例如：www.abc.com/xxx/auth.ht…       

這裏咱們用auth.html是根據 GetWeixinCode 進行修改的，修復了一些bug，感謝做者

• 攜帶的參數在受權完以後沒能所有帶回來。
• hash回調url錯誤問題

3.設置相關變量

在開發以前你要首先在下面三個文件設置兩個變量，若是你已經啓動項目，設置後須要重啓。

.env.development

.env.staging

.env.production

VUE_APP_WECHAT_APPID是你的appid，在.env.[環境] 文件中設置

VUE_APP_WECHAT_AUTH_URL是你的auth.html 訪問地址。在.env.[環境] 文件中設置

設置好了以後咱們就能夠經過 process.env.  使用了

4.實現微信受權相關方法

文件路徑：src/plugins/wechatAuth.js，主要是先微信跳轉地址拼接，獲取地址參數等。

微信受權相關方法封裝這裏引用的是[vue-wechat-login]，作了簡單的修改，直接在路由鉤子文件permission.js使用。

在permission.js去調用一些方法好比： wechatAuth.returnFromWechat(to.fullPath);

5.permission.js 路由守衛

src/permission.js 裏實現了主要的邏輯。

首先咱們現設置受權白名單whiteList，受權失敗，或者其餘錯誤進入404頁面。

const whiteList = ['/404']  router.beforeEach(async (to, from, next) => {   // 在白名單，直接進入   if (whiteList.indexOf(to.path) !== -1) {      return next()    }
    // ....
  })
複製代碼

接下來咱們設置一個loginStatus，用來表示登陸的狀態 ，0表明沒有登陸，那麼就須要跳轉到微信受權地址了。

// 設置回調地址，本地和線上不一樣  
     wechatAuth.redirect_uri = processUrl()
     await store.dispatch('user/setLoginStatus', 1)
      // 跳轉完整的受權地址
      window.location.href = wechatAuth.authUrl
複製代碼

wechatAuth.authUrl 地址 https://open.weixin.qq.com/connect/oauth2/authorize...的redirect_uri 調用 processUrl方法，根據環境不一樣返回不一樣的地址。前面咱們提到受權的回到地址必須是微信公衆號設置的受權頁面域名，因此這裏分兩種狀況

• 本地環境返回受權的回調地址：

  // 本地環境換經過auth.html拿code
  if (process.env.NODE_ENV === "development") { return https://test.top1buyer.com/auth.html?backUrl=${window.location.href}; }

 其中 process.env.VUE_APP_WECHAT_AUTH_URL 就是中間受權頁面的網址。backUrl後面跟的是你本地開發的地址。processUrl() 返回 www.abc.com/auth.html?b…

• 線上環境返回的是正常的微信受權地址:

  const url = window.location.href;
  // 解決屢次登陸url添加劇復的code與state問題 const urlParams = qs.parse(url.split("?")[1]); let redirectUrl = url; if (urlParams.code && urlParams.state) {
  delete urlParams.code;
  delete urlParams.state;
  const query = qs.stringify(urlParams); if (query.length) {
  redirectUrl = ${url.split("?")[0]}?${query}; } else { redirectUrl = ${url.split("?")[0]};
  }
  } return redirectUrl;

processUrl() 返回 **線上你的項目地址，**不用中間頁跳轉。只要保證你的項目域名，(好比：www.abc.com/wxapp/ )，的域名在微信公衆號設置的網頁受權域名列表裏就ok了。不跳轉中間頁會提高用戶體驗。

啓動項目

必要的參數設置好就能夠啓動了

// 啓動
npm run serve 
複製代碼

贊成以後就看到code值了

到此主要的流程就結束了。

注意：當受權成功後須要經過code換取token，由於並無對接後臺，因此這裏我註釋掉了

接下來操做在vuex中進行，用戶根據需求對接後臺接口便可。

/src/store/modules/user.js

好比這裏我須要經過code換區用戶信息，存儲用戶信息和token

const actions = { 
   // 登陸相關，經過code獲取token和用戶信息，用戶根據本身的需求對接後臺 
   loginWechatAuth({commit}, code) {     
   const data = {        code: code      } 
   return new Promise((resolve, reject) => {   
     loginByCode(data)
          .then(res => {
            // 存用戶信息，token
          commit('SET_USERINFO', saveUserInfo(res.data.user))
            commit('SET_TOKEN', saveToken(res.data.token))
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    }, 
} 
複製代碼

src/utils/request.js

axios數據請求封裝，請根據用戶需求自行修改

src/utils/cache.js文件用戶來緩存數據

import cookies from 'js-cookie'import storage from 'good-storage'const LoginStatusKey = 'Login-Status' // 登陸態 0未受權未登陸 1受權未登陸 2 登錄成功const TokenKey = 'Access-Token' // tokenconst UserInfoKey = 'User-Info' // 用戶信息 {} {...}// 獲取登陸狀態export function loadLoginStatus() {  return cookies.get(LoginStatusKey) || 0}// 保持登陸狀態export function saveLoginStatus(status) {  cookies.set(LoginStatusKey, status, {expires: 7})  return status}// 刪除登陸狀態export function removeLoginStatus() {  cookies.remove(LoginStatusKey)  return ''}// 獲取tokenexport function loadToken() {  return storage.get(TokenKey, '')}// 保存tokenexport function saveToken(token) {  storage.set(TokenKey, token)  return token}// 刪除tokenexport function removeToken() {  storage.remove(TokenKey)  return ''}// 獲取用戶信息export function loadUserInfo() {  return storage.get(UserInfoKey, {})}// 保存用戶信息export function saveUserInfo(userInfo) {  storage.set(UserInfoKey, userInfo)  return userInfo}// 刪除用戶信息export function removeUserInfo() {  storage.remove(UserInfoKey)  return {}}
複製代碼

項目地址

github:vue-wechat-auth

另外，項目架構介紹請看[ vue-h5-template]基於vue-cli4.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝。若是你只須要受權邏輯，只要把涉及到的相關文件放到你的項目下就能夠。

常見問題

• 上線後一直循環跳轉，清除緩存，註釋掉 src/utils/request.js 裏的 location.reload() 調試

關於我

若是您遇到了問題能夠給我提 issues 

獲取更多技術相關文章，關注公衆號」前端女塾「。

回覆‘前端’，便可加入」前端仙女羣「

您也能夠掃描添加下方的微信並備註 Sol 加前端交流羣，交流學習。

若是對你有幫助送我一顆小星星，你的star是我前進的動力（づ￣3￣）づ╭❤～