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

1、新建wechatAuth.js文件

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() {

  returnMath.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() {

  returnthis._redirect_uri

}

get state() {

  returnlocalStorage.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)

  returncode

}

}

const vueWechatAuthPlugin = newVueWechatAuthPlugin()

export defaultvueWechatAuthPlugin

2、main.js中导入

import wechatAuth from './plugins/wechatAuth'//微信登录插件

const queryString = require('query-string');

Vue.use(wechatAuth, {appid: XXXXXXXXX});

3、路由钩子中可以进行相关操作

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) {

  deleteparseUrl.code;

  deleteparseUrl.state;

  loginUrl = `${url.split('?')[0]}?${queryString.stringify(parseUrl)}`;

  } else{

  loginUrl = url;

  }

  wechatAuth.redirect_uri = loginUrl;

  store.dispatch('setLoginStatus', 1);

  window.location.href = wechatAuth.authUrl

} elseif(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()

}

});

你可能感兴趣的:(vue移动端微信授权登录插件封装的实例)