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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS常见算法详解
2017/02/28 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
js中的 || 与 && 运算符详解
2018/05/24 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
名人演讲稿范文
2013/12/28 职场文书
童装店创业计划书
2014/01/09 职场文书
李开复演讲稿
2014/05/24 职场文书
最常使用的求职信
2014/05/25 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2014年就业工作总结
2014/11/26 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
检讨书范文1000字
2015/01/28 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python