vue微信網頁授權，基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios，開發的微信授權方案。項目地址：vue-wechat-auth

參考了[vue-wechat-login]，思路有些不同，本文基于進入所有頁面都必須先授權的操作。

與之前寫的授權不同之處

這次的邏輯全部在router的beforeEach進行，相較更加簡潔明。之前是在一個中間頁author.vue中，加上微信授權要跳轉很多次

在這里你能找到

微信網頁授權前端解決方案，官方文檔

如何使用Natapp(ngrok)進行微信本地開發調試,官方文檔

如何配置微信開發測試賬號

關于測試賬號和本地開發設置

由于文章過長這里[微信測試賬號和本地開發調試]記得回來哦~

微信網頁授權

都設置好了那就開始微信網頁開發第一步也是最重要的一步，微信網頁授權

關于授權你首先要清楚的是，服務端要用到的是微信openid還是微信unionid，這兩者的區別是，如果你要的是unionid,那么你需要在[微信開放平臺]去綁定測試賬號。測試號的appId和appsecret在微信公眾平臺的測試號里找。微信公眾號后臺->開發者工具->公眾平臺測試帳號->進入

如果你不需要unionid，那這個你就可以省略， 如果服務端是需要unionid的那不綁定的話授權會把報錯的。記得問一下服務端開發人員哦。

開發

首先我們看下微信授權的流程圖，關于微信網頁授權

前端需要做的是

第一步：用戶同意授權，獲取code，拼接微信授權地址，redirect_uri就是你的當前地址，關于appid有些人是通過接口獲取的，我這里就直接寫在項目全局變量里了VUE_APP_WECHAT_APPID，用戶授權成功后微信會攜帶code和status跳回來

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect

第二步，訪問登錄接口，將code傳給服務端，小哥哥進行一系列的操作，通過code換取網頁授權access_token，拉取用戶信息(需scope為 snsapi_userinfo)，返回是否登錄成功，成功后返回用戶信息和登錄令牌 token

在permission.js中路由攔截進行這一系列操作，代碼注釋很詳細了

permission.js

import router from './router'import store from './store'import getPageTitle from '@/utils/get-page-title'import wechatAuth from './plugins/wechatAuth' // 微信登錄插件const qs = require('qs')router.beforeEach((to, from, next) => { const loginStatus = Number(store.getters.loginStatus) console.log('loginStatus=' + loginStatus) console.log('token=' + store.getters.token) // 頁面標題 document.title = getPageTitle(to.meta.title) if (loginStatus === 0) { // 微信未授權登錄跳轉到授權登錄頁面 const url = window.location.href // 解決重復登錄url添加重復的code與state問題 const parseUrl = qs.parse(url.split('?')[1]) let loginUrl if (parseUrl.code && parseUrl.state) { delete parseUrl.code delete parseUrl.state loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}` } else { loginUrl = url } // 設置微信授權回調地址 wechatAuth.redirect_uri = loginUrl // 無論拒絕還是授權都設置成1 store.dispatch('user/setLoginStatus', 1) // 跳轉到微信授權頁面 window.location.href = wechatAuth.authUrl } else if (loginStatus === 1) { // 用戶已授權，獲取code try { // 通過回調鏈接設置code status wechatAuth.returnFromWechat(to.fullPath) } catch (err) { // 失敗，設置狀態未登錄，刷新頁面 store.dispatch('user/setLoginStatus', 0) location.reload() } // 同意授權 to.fullPath 攜帶code參數，拒絕授權沒有code參數 const code = wechatAuth.code if (code) { // 拿到code 訪問服務端的登錄接口 store .dispatch('user/loginWechatAuth', code) .then(res => {  // 成功設置已登錄狀態  store.dispatch('user/setLoginStatus', 2)  next() }) .catch(() => {  // 失敗，設置狀態未登錄，刷新頁面  store.dispatch('user/setLoginStatus', 0)  location.reload() }) } else { store.dispatch('user/setLoginStatus', 0) location.reload() } } else { // 已登錄直接進入 next() }})