基于网易云API做的一个扫码登录

趁着几天有空的时间做了个超级简单的音乐（pc端）

首先讲登录（这里演示扫码登录）

第一步看接口文档

1. 二维码key生成接口

说明: 调用此接口可生成一个key

接口地址 : /login/qr/key

2. 二维码生成接口

必选参数: key,由第一个接口生成

可选参数: qrimg 传入后会额外返回二维码图片base64编码

接口地址 : /login/qr/create

3. 二维码检测扫码状态接口

必选参数: key,由第一个接口生成

接口地址 : /login/qr/check

第二步看完文档，当然是去接接口哇（另一篇文档有写如何封装请求头）

// 时间戳timestamp
// 说明: 调用此接口可生成一个key

export function qrCodeLoginKey(timestamp){
    return request.get('/login/qr/key?timestamp='+timestamp)
}

// 2. 二维码生成接口
// 说明: 调用此接口传入上一个接口生成的key可生成二维码图片的base64和二维码信息,可使用base64展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码

export function qrCodeLoginImg(key){
    return request.get('/login/qr/create?qrimg=true&key='+key)
}

// 3. 二维码检测扫码状态接口
// 说明: 轮询此接口可获取二维码扫码状态,800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)

export function qrCodeLoginCheck(key,timestamp){
    return request.get('/login/qr/check?key='+key+'&timestamp='+timestamp)
}

第三步引入后，写二维码登录逻辑

按需引入

import {
		qrCodeLoginKey,
		qrCodeLoginImg,
		qrCodeLoginCheck
	} from '../api/necessary.js'

再写逻辑前我们要明白是什么逻辑！！！（这个很重要）

首先我们要通过第一个接口拿到key，然后给key第二个接口拿到二维码图片，最后是每隔一段时间调第三接口check检测登录状态!!!

HAO！逻辑知道了，开始动手

			login: async function() {
				let nowtime = Date.now();
				//调第一个接口拿key
				let key = (await qrCodeLoginKey(nowtime)).data.data.unikey
				//调第二个接口拿二维码图片
				let sginImgURL = (await qrCodeLoginImg(key)).data.data.qrimg
				this.$store.state.signShow = true
				this.$store.state.signURL = sginImgURL
				// 800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功
				//每三秒check一次
				let check = setInterval(async () => {
					let nowtime2 = new Date().getTime();
					let res = await qrCodeLoginCheck(key,nowtime2).then()
					console.log(res.data.message, '---')
					if (res.data.code == 800) {
						alert(res.data.message)
						clearInterval(check)
					}
					if (res.data.code == 803) {
						alert(res.data.message)
						clearInterval(check)
					}
				}, 3000)
			}

最后看一下效果图