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

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

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

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