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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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作的文本留言本的例子(四)
2006/10/09 PHP
php 代码优化之经典示例
2011/03/24 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
深入解析JavaScript的闭包机制
2015/10/20 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Python socket编程实例详解
2015/05/27 Python
Python中单例模式总结
2018/02/20 Python
Windows下python3.7安装教程
2018/07/31 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
在C#中如何实现多态
2014/07/02 面试题
大学生学业生涯规划
2014/01/05 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers