vue移动端微信授权登录插件封装的实例
1、新建wechatAuth.js文件
constqueryString=require('query-string') //应用授权作用域,snsapi_base(不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo(弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息) constSCOPES=['snsapi_base','snsapi_userinfo'] classVueWechatAuthPlugin{ install(Vue,options){ letwechatAuth=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 } staticmakeState(){ returnMath.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15) } setAppId(appid){ this.appid=appid } setredirect_uri(redirect_uri){ this._redirect_uri=encodeURIComponent(redirect_uri) } getredirect_uri(){ returnthis._redirect_uri } getstate(){ returnlocalStorage.getItem("wechat_auth:state") } setstate(state){ localStorage.setItem("wechat_auth:state",state) } getauthUrl(){ if(this.appid===null){ throw"appidmustnotbenull" } if(this.redirect_uri===null){ throw"redirecturimustnotbenull" } 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){ letparsedUrl=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"Youdid'tsetstate" } if(parsedUrl.state===this.state){ this.state=null this._code=parsedUrl.code }else{ this.state=null throw`Wrongstate:${parsedUrl.state}` } } } getcode(){ if(this._code===null){ throw"Notgetthecodefromwechatserver!" } //console.log(this) //console.log('this._code:'+this._code) letcode=this._code this._code=null //console.log('code:'+code) returncode } } constvueWechatAuthPlugin=newVueWechatAuthPlugin() exportdefaultvueWechatAuthPlugin
2、main.js中导入
importwechatAuthfrom'./plugins/wechatAuth'//微信登录插件 constqueryString=require('query-string'); Vue.use(wechatAuth,{appid:XXXXXXXXX});
3、路由钩子中可以进行相关操作
router.beforeEach((to,from,next)=>{ if(store.state.loginStatus==0){ //微信未授权登录跳转到授权登录页面 leturl=window.location.href; //解决重复登录url添加重复的code与state问题 letparseUrl=queryString.parse(url.split('?')[1]); letloginUrl; 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移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。