首页 / VUE / vue移动端微信授权登录插件封装的实例
vue移动端微信授权登录插件封装的实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue移动端微信授权登录插件封装的实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3329字,纯文字阅读大概需要5分钟。
内容图文
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移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue移动端微信授权登录插件封装的实例全部内容,希望文章能够帮你解决vue移动端微信授权登录插件封装的实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。