vue移动端微信授权登录插件封装的实例

const queryString = require('query-string')//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）const SCOPES = ['snsapi_base', 'snsapi_userinfo']class VueWechatAuthPlugin { install(Vue, options) {  let wechatAuth = this  this.setAppId(options.appid)  Vue.mixin({   created: function () {    this.$wechatAuth = wechatAuth   }  }) } constructor() {  this.appid = null  this.redirect_uri = null  this.scope = SCOPES[1]  this._code = null  this._redirect_uri = null } static makeState() {  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) } setAppId(appid) {  this.appid = appid } set redirect_uri(redirect_uri) {  this._redirect_uri = encodeURIComponent(redirect_uri) } get redirect_uri() {  return this._redirect_uri } get state() {  return localStorage.getItem("wechat_auth:state") } set state(state) {  localStorage.setItem("wechat_auth:state", state) } get authUrl() {  if (this.appid === null) {   throw "appid must not be null"  }  if (this.redirect_uri === null) {   throw "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.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect` } returnFromWechat(redirect_uri) {  let parsedUrl = queryString.parse(redirect_uri.split('?')[1])  if (process.env.NODE_ENV === 'development') {   // console.log('parsedUrl: ', parsedUrl)   this.state = null   this._code = parsedUrl.code  } else {   if (this.state === null) {    throw "You did't set state"   }   if (parsedUrl.state === this.state) {    this.state = null    this._code = parsedUrl.code   } else {    this.state = null    throw `Wrong state: ${parsedUrl.state}`   }  } } get code() {  if (this._code === null) {   throw "Not get the code from wechat server!"  }  // console.log(this)  // console.log('this._code: ' + this._code)  let code = this._code  this._code = null  // console.log('code: ' + code)  return code }}const vueWechatAuthPlugin = new VueWechatAuthPlugin()export default vueWechatAuthPlugin

import wechatAuth from './plugins/wechatAuth'//微信登录插件const queryString = require('query-string');Vue.use(wechatAuth, {appid: XXXXXXXXX});

router.beforeEach((to, from, next) => { if (store.state.loginStatus == 0) {  //微信未授权登录跳转到授权登录页面  let url = window.location.href;  //解决重复登录url添加重复的code与state问题  let parseUrl = queryString.parse(url.split('?')[1]);  let loginUrl;  if (parseUrl.code && parseUrl.state) {   delete parseUrl.code;   delete parseUrl.state;   loginUrl = `${url.split('?')[0]}?${queryString.stringify(parseUrl)}`;  } else {   loginUrl = url;  }  wechatAuth.redirect_uri = loginUrl;  store.dispatch('setLoginStatus', 1);  window.location.href = wechatAuth.authUrl } else if (store.state.loginStatus == 1) {  try {   wechatAuth.returnFromWechat(to.fullPath);  } catch (err) {   store.dispatch('setLoginStatus', 0)   next()  }  store.dispatch('loginWechatAuth', wechatAuth.code).then((res) => {   if (res.status == 1) {    store.dispatch('setLoginStatus', 2)   } else {    store.dispatch('setLoginStatus', 0)   }   next()  }).catch((err) => {   next()  }) }else {  next() }});