趁著幾天有空的時間做了個超級簡單的音樂（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();//調第一個接口拿keylet key = (await qrCodeLoginKey(nowtime)).data.data.unikey//調第二個接口拿二維碼圖片let sginImgURL = (await qrCodeLoginImg(key)).data.data.qrimgthis.$store.state.signShow = truethis.$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)}

最后看一下效果圖

總結

以上是生活随笔為你收集整理的基于网易云API做的一个扫码登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。