vue微信網頁受權最終解決方案

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

又又又一次來寫微信網頁受權，一年前寫過的 [vue 微信受權解決方案]。

參考了[vue-wechat-login]，思路有些不一樣，本文基於進入全部頁面都必須先受權的操做。

與以前寫的受權不一樣之處

此次的邏輯所有在router的beforeEach進行，相較更加簡潔明。以前是在一箇中間頁author.vue中，加上微信受權要跳轉不少次

在這裏你能找到

1. 微信網頁受權前端解決方案，官方文檔
2. 如何使用Natapp(ngrok)進行微信本地開發調試,官方文檔
3. 如何配置微信開發測試帳號

關於測試帳號和本地開發設置

因爲文章過長這裏[微信測試帳號和本地開發調試]記得回來哦~

微信網頁受權

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

關於受權你首先要清楚的是，服務端要用到的是微信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()
  }
})

登陸成功後存用戶信息，token。訪問全部的接口的時候都會在header攜帶token，若是token失效了，服務端會返回401，作退出操做，刪除登陸狀態，用戶信息，token，刷新頁面從新進入。

request.js

// 登陸超時,從新登陸     
 if (res.status === 401) {    
    store.dispatch('user/fedLogOut').then(() => {  
        location.reload()    
    })      
}

用戶登陸後將token和用戶信息存入storage中，登陸狀態設置到cookie裏，store user中主要是進行用戶信息存貯獲取刪除的操做

store/modules/user.js

import { loginByCode } from '@/api/user'
import {
  saveToken,
  saveLoginStatus,
  saveUserInfo,
  removeToken,
  removeUserInfo,
  removeLoginStatus,
  loadLoginStatus,
  loadToken,
  loadUserInfo
} from '@/utils/cache'
const state = {
  loginStatus: loadLoginStatus(), // 登陸狀態
  token: loadToken(), // token
  userInfo: loadUserInfo() // 用戶登陸信息
}

const mutations = {
  SET_USERINFO: (state, userInfo) => {
    state.userInfo = userInfo
  },
  SET_LOGIN_STATUS: (state, loginStatus) => {
    state.loginStatus = loginStatus
  },
  SET_TOKEN: (state, token) => {
    state.token = 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)
        })
    })
  },
  // 設置狀態
  setLoginStatus({ commit }, query) {
    if (query === 0 || query === 1) {
      // 上線打開註釋，本地調試註釋掉，保持信息最新
      removeToken()
      removeUserInfo()
    }
    // 設置不一樣的登陸狀態
    commit('SET_LOGIN_STATUS', saveLoginStatus(query))
  },
  // 登出
  fedLogOut() {
    // 刪除token，用戶信息，登錄狀態
    removeToken()
    removeUserInfo()
    removeLoginStatus()
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在根目錄下.env開頭的三個文件中設置微信appID

VUE_APP_WECHAT_APPID='12345678'複製代碼

受權再也難不住我了，若是哪裏有問題但願你們給我留言糾正，互相學習

關於我

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

若是對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～