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 面向对象 命名空间
May 13 Javascript
json数据的列循环示例
Sep 06 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
vue router 传参获取不到的解决方式
Nov 13 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
遗传算法python版
2018/03/19 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python实现局域网内实时通信代码
2019/12/22 Python
医学生职业规划范文
2014/01/05 职场文书
葬礼司仪主持词
2014/03/31 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
教师批评与自我批评
2014/10/15 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python