一 官方文檔

二 前端代碼

<template><div class="bbox"><div class="top"><div class="topp">登錄<i class="el-icon-close"></i></div></div><div class="mid"><div class="left"><img src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9643571155/525c/faac/2dc6/fe695c03c7c358ddaa4651736b26a55f.png" alt=""></div><div class="right"><div class="rightt">掃碼登陸</div><img :src="qrimgs" alt="" style="width:200px;height:200px"> <div class="rightb">使用&nbsp;<a href="https://music.163.com/#/download" style="color:skyblue">網(wǎng)易云app</a>掃碼登錄</div></div></div></div></div> </template><script> import axios from 'axios'; export default {props: {// 登錄彈框是否存在loginVisible: {type: Boolean,default: false}},data() {return {unikey: '',//keyqrurl: '',qrimgs: '',//二維碼圖片qrCheckData: {},//狀態(tài)isLogin: false//是否登錄}},mounted() {this.getKey()},methods:{//獲取二維碼的key值getKey() {let keyData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/key', {params:{timerstamp: new Date().getTime(),} }).then(res=>{this.unikey = res.data.data.unikeythis.loginQqr(this.unikey)}) },//通過key去獲取二維碼loginQqr(key) {let qrData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/create',{params:{timerstamp: new Date().getTime(),//傳入?yún)?shù)時(shí)間戳qrimg: true,key:key,}}).then(res=>{this.qrurl = res.data.data.qrurlthis.qrimgs = res.data.data.qrimgthis.qrCheck()})},//獲取二維碼的狀態(tài)qrCheck() {let qrCheckData = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/login/qr/check', {params:{key: this.unikey,timerstamp: new Date().getTime(),//傳入?yún)?shù)時(shí)間戳withCredentials: true} }).then(res=>{// console.log(2222);console.log(res);this.qrCheckData = res.datasessionStorage.setItem('cookie', res.data.cookie);this.isLogin = true}) },//獲取登錄之后的狀態(tài)getStatus() {let getStatus = axios.get(`https://netease-cloud-music-api-beta-lyart.vercel.app/login/status?cookie=${sessionStorage.getItem("cookie")}`, {}).then(res=>{sessionStorage.getItem("cookie");// console.log(res.data.data.account.id,res.data.data.account.status);// console.log(res.data.data.profile.avatarUrl,res.data.data.profile.nickname);sessionStorage.setItem('isLogin', res.data.data.account.status);sessionStorage.setItem('userid', res.data.data.account.id);sessionStorage.setItem('avatarUrl', res.data.data.profile.avatarUrl);sessionStorage.setItem('nickname', res.data.data.profile.nickname);console.log(666);// console.log( sessionStorage.getItem('isLogin'));// console.log(sessionStorage.getItem("nickname"));}) },//獲取用戶信息 , 歌單，收藏，mv, dj 數(shù)量// getUinfo() {// let getUinfo = axios.get('https://netease-cloud-music-api-beta-lyart.vercel.app/user/detail?uid=32953014', {// }).then(res=>{// console.log('0000000');// console.log(res);// // console.log(res.data.data.code);// }) // },},watch: {isLogin: function () {let times = setInterval(async () => {this.qrCheck()let code = this.qrCheckData.code// 判斷返回值中的codeif (code === 801) {} else if (code === 802) {} else if (code === 803) {sessionStorage.setItem("user", true);this.$router.push("/");//用戶登錄成功后清除定時(shí)器clearInterval(times)//獲取登錄之后的uid和用戶詳情以及登錄狀態(tài)this.getStatus()// this.getUinfo()}}, 5000)},},} </script> <style lang="scss" scoped> .bbox{margin: auto;position: relative;width: 530px;height: 350px;background-color: #fff;border: #333 solid 1px;} .top{width: 530px;height: 50px;background-color: rgb(49, 35, 35);color:white } .topp{font-weight: bold;margin-left: 18px;margin-right:18px ;padding-top: 16px;display: flex;justify-content: space-between; } .mid{padding: 30px;display: flex; } .left img{width: 125px;height: 220px;margin-left: 20px;} .right{margin-left: 20px;display: flex;align-content: space-between;flex-direction: column } .rightt{margin-left: 5px;font-size: 18px;font-weight: 500;color: #333;// width: 200px;// height: 24px;color: rgba(0, 0, 0, 0.4);} .rightb{ margin-left: 15px; } .but{position: absolute;bottom: 0;margin-left: 10px; } .mid{margin-left: 50px; }</style>

三 效果圖

總結(jié)

以上是生活随笔為你收集整理的vue 基于网易云API实现二维码的登录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。