vue项目中微信登录的实现操作


Posted in Javascript onSeptember 08, 2020

1、下载组件 wxlogin

npm install vue-wxlogin --save

2、引入组件,给组件传参

3、重定向的url应该是微信登录官网中的微信授权作用域

4、如果url里面有端口号,微信授权作用里面也要有

5、重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码

6、微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数

7、如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标签,加上这个属性:sandbox=“allow-scripts allow-top-navigation allow-same-origin”

报错内容:

qrconnect?scope=snsapi_login&redirect_uri=http%3a%2f%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href=:84 Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://localhost:9020' from frame with URL 'https://open.weixin.qq.com/connect/qrconnect?app&scope=snsapi_login&redirect_uri=http%3a%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href='. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/features/5851021045661696.```

补充知识:vue移动端微信授权登录插件封装

1.新建wechatAuth.js文件

const qs = require('qs')
//应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
const SCOPES = ['snsapi_base', 'snsapi_userinfo']

class VueWechatAuthPlugin {

 constructor () {
 this.appid = null
 this.redirect_uri = null
 this.scope = SCOPES[1]
 this._code = null
 this._redirect_uri = null
 }

 install (Vue, options) {
 let wechatAuth = this
 this.setAppId(options.appid)
 Vue.mixin({
 created: function () {
 this.$wechatAuth = wechatAuth
 },
 })

 }

 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 = qs.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()

if (typeof window !== 'undefined' && window.Vue) {
 window.Vue.use(VueWechatAuthPlugin)
}

export default vueWechatAuthPlugin

2.main.js中导入

import wechatAuth from './plugins/wechatAuth'//微信登录插件
const qs= require('qs');
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 = qs.parse(url.split('?')[1]);
 let loginUrl;
 if (parseUrl.code && parseUrl.state) {
 delete parseUrl.code;
 delete parseUrl.state;
 loginUrl = `${url.split('?')[0]}?${qs.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()
 }
});

2018.8.31更新

更新微信授权登录vue-cli 3.x与2.x的demo vue-wechat-login,查看对应分支即可。

2019.7.23更新

代码进行了相关重构 vue-wechat-login

以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
js常用代码段整理
Nov 30 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 #Javascript
基于postman获取动态数据过程详解
Sep 08 #Javascript
You might like
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php树型类实例
2014/12/05 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
动态加载js的几种方法
2006/10/23 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
简单介绍Python中的JSON模块
2015/04/08 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
五五普法心得体会
2014/09/04 职场文书
廉政承诺书范文
2015/04/28 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android