电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue項目中微信登錄的實現操作

瀏覽:121日期:2022-06-11 16:10:41

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項目中微信登錄的實現操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: 微信
相關文章:
主站蜘蛛池模板: PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 北京发电机出租_发电机租赁_北京发电机维修 - 河北腾伦发电机出租 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 中宏网-今日新闻-财经新闻 | 流量检测仪-气密性检测装置-密封性试验仪-东莞市奥图自动化科技有限公司 | 小程序开发公司-小程序制作-微信小程序开发-小程序定制-咏熠软件 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | IP检测-检测您的IP质量| 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | 艾乐贝拉细胞研究中心 | 国家组织工程种子细胞库华南分库 | 深圳彩钢板_彩钢瓦_岩棉板_夹芯板_防火复合彩钢板_长鑫 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 【星耀裂变】_企微SCRM_任务宝_视频号分销裂变_企业微信裂变增长_私域流量_裂变营销 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | cnc精密加工_数控机械加工_非标平键定制生产厂家_扬州沃佳机械有限公司 | 拉卡拉POS机官网 - 官方直营POS机办理|在线免费领取 | 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 实验室隔膜泵-无油防腐蚀隔膜泵-耐腐蚀隔膜真空泵-杭州景程仪器 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 中国玩具展_玩具展|幼教用品展|幼教展|幼教装备展 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 北京发电机出租_发电机租赁_北京发电机维修 - 河北腾伦发电机出租 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 卸料器-卸灰阀-卸料阀-瑞安市天蓝环保设备有限公司 | 橡胶膜片,夹布膜片,橡胶隔膜密封,泵阀设备密封膜片-衡水汉丰橡塑科技公司网站 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 无缝方管|无缝矩形管|无缝方矩管|无锡方管厂家 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | 干培两用箱-细菌恒温培养箱-菲斯福仪器 | 护栏打桩机-打桩机厂家-恒新重工| 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 二手回收公司_销毁处理公司_设备回收公司-找回收信息网 | 禹城彩钢厂_钢结构板房_彩钢复合板-禹城泰瑞彩钢复合板加工厂 |