vue网易云二维码登录

html代码

<el-card  v-loading="looogin" class="el_add_card" shadow="hover"> <!-- element-ui卡片 --><img style="width:128px;height:128px" :src="urrl" alt=""><button @click="login()" >获取二维码</button><p style="line-height:100px;font-size:16px;"><imgstyle="width:100px;height:100px;brder-radius:50%;":src="headImg" alt=""><span>{{usNName}}</span></p>
</el-card>

用到的data

urrl:'',

key:'',

usNName:'',

cookier:'',

uid:'',

headImg:'',

事件

login(){let date=new Date();this.$axios({method: "post",url: `http://localhost:3000/login/qr/key?${date.getTime()}`,data: '',}).then((res) => {//获取二维码key// console.log(res.data.data.unikey)//   this.urrl=res.data.data.qrurlthis.key=res.data.data.unikeylet date=new Datethis.$axios({method: "post",url: `http://localhost:3000/login/qr/create?${date.getTime()}`,data: {key:this.key,qrimg:true},}).then((res) => {//获取二维码图片// console.log(res.data.data)this.urrl=res.data.data.qrimgthis.aaaar()}).catch((error) => {console.log(error)});}).catch((error) => {console.log(error)});},aaaar(){let timerrr=setInterval(() => {//轮询检索二维码扫描状态let date=new Datethis.$axios({method: "post",url: `http://localhost:3000/login/qr/check?${date.getTime()}`,data: {key:this.key,},}).then((res) => {// console.log(res.data.cookie)//802:授权中//800:授权成功//803二维码失效if(res.data.code=='802'){this.looogin=true}else if(res.data.code=='803'){this.looogin=falsethis.cookier=res.data.cookiewindow.clearInterval(timerrr)let date=new Datethis.$axios({method: "post",url: `http://localhost:3000/user/account?${date.getTime()}`,data: {cookie:this.cookier,},}).then((res) => {// console.log(res.data)this.uid=res.data.account.idthis.usNName=res.data.profile.nicknamethis.headImg=res.data.profile.avatarUrl}).catch((error) => {console.log(error)});}}).catch((error) => {console.log(error)});}, 1000);},

vue网易云二维码登录相关推荐

调用网易云二维码登录API，实现微信小程序登录
调用网易云二维码登录API,实现微信小程序登录首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou- 首先根据文档的链接下载好配置文件,再根据官方文档启动好本 ...
vue中实现二维码登录功能
1.在项目的控制台下载插件: npm install vue-wxlogin --save-dev 2.导入该组件 <script> import Wxlogin from 'vue-wx ...
网易云音乐二维码登录官方版
二维码登录官网链接(https://binaryify.github.io/NeteaseCloudMusicApi)) 下载官方API到本地,打开NeteaseCloudMusicApi文件夹,在 ...
百度网盘PC端扫描二维码登录时无法加载二维码问题解决方法
问题: 今天在PC端扫描登录百度网盘时,二维码无法加载出来,具体情况如图: 解决方法: 1.打开IE浏览器 2.打开工具 3.打开Internet选项 4.打开高级选项,重置IE设置 5.点击确定,打 ...
vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的
随机字符串解决大问题之腾讯网如何实现手机扫描二维码登录qq功能的腾讯网(www.qq.com)有一个扫码登录功能很有意思, 点击首页一键登录按钮,就会展现一个二维码,用手机qq扫描此二维码就可以使当 ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
java微信二维码登录
1.注册微信开放平台:https://open.weixin.qq.com 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5.创建网站应用提交审 ...
Python模拟二维码登录百度
模拟二维码登录百度写在前面准备工作二维码地址登录状态获取gid 登录参数代码部分二维码展示获取cookie 完整代码写在后面写在前面前段时间写了利用BDUSS到达百度首页,这一次 ...
百度网盘二维码显示失败
电脑百度网盘二维码显示失败或者知云文献翻译登录二维码显示失败一般都是因为IE浏览器设置问题, 解决方法:win+R -> 输入: inetcpl.cpl 后回车 ->点击高级选 ...

vue网易云二维码登录

vue网易云二维码登录相关推荐

最新文章

热门文章