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


Posted in Javascript onAugust 28, 2018

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

Javascript 相关文章推荐
javascript add event remove event
Apr 07 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 #Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
python之列表推导式的用法
2019/11/29 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python爬取招聘要求等信息实例
2020/11/20 Python
通用C#笔试题附答案
2016/11/26 面试题
新郎婚宴答谢词
2014/01/19 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
大学生村官承诺书
2014/03/28 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
低碳环保倡议书
2014/04/14 职场文书
医学专业大学生求职信
2014/07/12 职场文书
如何写早恋检讨书
2014/09/10 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书