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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
javascript操作excel生成报表示例
May 08 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
详解Vue源码中一些util函数
Apr 24 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JS array 数组详解
2009/03/22 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python 代码性能优化技巧分享
2012/08/07 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
运动会通讯稿500字
2014/02/20 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python