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

1、新建wechatAuth.js文件

rush: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() {
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&s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e=${this.s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e}&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

2、main.js中导入

rush:js;"> import wechatAuth from './plugins/wechatAuth'//微信登录插件 const queryString = require('query-string');

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

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

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

以上这篇vue移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。