Vue实现微信授权登录

新建个文件wechatAuth.js
这个文件可以不用更改

const queryString = require('qs')
// 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），
// snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
const SCOPES = ['snsapi_base', 'snsapi_userinfo']

class VueWechatAuthPlugin {
  install(Vue, options) {
    let wechatAuth = this
    this.setAppId(options.appid)
    this.scope = SCOPES[options.scope ? 1 : 0]
    Vue.mixin({
      created() {
        this.$wechatAuth = wechatAuth
      },
    })
  }

  constructor() {
    this.appid = null
    this.redirectUri = null
    this.scope = null
    this._code = null
    this._redirectUri = null
  }

  static makeState() {
    return (
      Math.random()
      .toString(36)
      .substring(2, 15) +
      Math.random()
      .toString(36)
      .substring(2, 15)
    )
  }

  setAppId(appid) {
    this.appid = appid
  }

  set redirectUri(redirectUri) {
    this._redirectUri = encodeURIComponent(redirectUri)
  }

  get redirectUri() {
    return this._redirectUri
  }

  get state() {
    return localStorage.getItem('wechat_auth:state')
  }

  set state(state) {
    localStorage.setItem('wechat_auth:state', state)
  }

  get authUrl() {
    if (this.appid === null) {
      throw new Error('appid must not be null')
    }
    if (this.redirectUri === null) {
      throw new Error('redirect uri must not be null')
    }
    this.state = VueWechatAuthPlugin.makeState()
    return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${
      this.redirectUri
    }&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
  }


  returnFromWechat(redirectUri) {
    let parsedUrl = queryString.parse(redirectUri.split('?')[1])
    if (process.env.NODE_ENV === 'development') {
      this.state = null
      this._code = parsedUrl.code
    } else {
      if (this.state === null) {
        throw new Error("You did't set state")
      }
      if (parsedUrl.state.replace('#/', '') === this.state) {
        this.state = null
        this._code = parsedUrl.code
      } else {
        this.state = null
        throw new Error(`Wrong state: ${parsedUrl.state}`)
      }
    }
  }

  get code() {
    console.log('code', this._code)
    if (this._code === null) {
      throw new Error('Not get the code from wechat server!')
    }

    const code = this._code
    this._code = null
    return code
  }
}

const vueWechatAuthPlugin = new VueWechatAuthPlugin()
export default vueWechatAuthPlugin

在main.js里

import wechatAuth from './axios/wechatAuth'

//这里是配置微信公众号的appid
Vue.use(wechatAuth, {
  appid: "123",
  scope: 'snsapi_userinfo',
})

在router里的js里

import Vue from 'vue'
import Router from 'vue-router'
import wechatAuth from '../axios/wechatAuth'
import axios from 'axios'
Vue.use(Router)
Vue.prototype.$axios = axios;
import {
  Dialog
} from "vant";

在路由里配置路由守卫

//截取code
function GetRequest() {
  var url = location.search;
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    var strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
    }
  }
  return theRequest;
}

// 获取sign身份的唯一标识
function rewardSign(next) {
  let theCode = GetRequest().code;
  if (theCode != undefined) {
    let realUrl = window.location.href.split("?")[0];
    var formData = new FormData();
    formData.append("api_key", "12345");
    formData.append("origin", 1);
    formData.append("code", theCode);
    axios({
      method: "post",
      url: "http://api",
      data: formData
    }).then(res => {
      if (res.data.status == 1) {
        localStorage.setItem("wx_sign", res.data.data.sign);
        //接收到sign回调链接
        window.location.href = realUrl;
        next()
      } else {
        Dialog.alert({
          title: '提示',
          message: res.data.msg,
        })
      }
    });
  } else if (localStorage.getItem("wx_sign") == null) {
    wechatAuth.redirectUri = window.location.href
    window.location.href = wechatAuth.authUrl
  } else {
    next()
  }
}

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  if (process.env.NODE_ENV == "production") {
    rewardSign(next)
  } else {
    next();
  }
});