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

时间:2021-05-26

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

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) { 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移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章