时间：2023-04-23 21:06:01 | 来源：网站运营
时间：2023-04-23 21:06:01 来源：网站运营
【个人练习】网易云音乐PC端仿站 Vue 2（四）：
在线咨询
getQRCode方法用来获取二维码图片URL，同时设置一个定时器，每隔一段时间检查二维码状态。如果二维码过期，显示二维码过期的提示和重新获取按钮；如果登录扫码成功，得到cookie，从而根据cookie获取用户信息。二维码登录
说明: 二维码登录涉及到 3 个接口,调用务必带上时间戳,防止缓存
1. 二维码 key 生成接口
说明: 调用此接口可生成一个 key
接口地址 :/login/qr/key
2. 二维码生成接口
说明: 调用此接口传入上一个接口生成的 key 可生成二维码图片的 base64 和二维码信息,可使用 base64 展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码
必选参数:key,由第一个接口生成
可选参数:qrimg传入后会额外返回二维码图片 base64 编码
3. 二维码检测扫码状态接口
说明: 轮询此接口可获取二维码扫码状态,800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功(803 状态码下会返回 cookie)
必选参数:key,由第一个接口生成
接口地址 :/login/qr/check
// 二维码key生成export function reqLoginQRKey() { return request('/login/qr/key', 'get')}// 二维码生成export function reqLoginQRCreate(key) { return request('/login/qr/create', 'get', { 'key': key, 'qrimg': true })}// 二维码检测扫码状态export function reqLoginQRCheck(key) { return request('/login/qr/check', 'get', { 'key': key })}2. 手机号+验证码登录发送验证码
说明 : 调用此接口 ,传入手机号码, 可发送验证码
必选参数 :phone: 手机号码
可选参数 :ctcode: 国家区号,默认 86 即中国
接口地址 :/captcha/sent
验证验证码
说明 : 调用此接口 ,传入手机号码和验证码, 可校验验证码是否正确
必选参数 :phone: 手机号码，captcha: 验证码
可选参数 :ctcode: 国家区号,默认 86 即中国
接口地址 :/captcha/verify
手机登录
必选参数 :phone: 手机号码，password: 密码
可选参数 :countrycode: 国家码，用于国外手机号登录，例如美国传入：1md5_password: md5 加密后的密码,传入后password参数将失效captcha: 验证码,使用/captcha/sent接口传入手机号获取验证码,调用此接口传入验证码,可使用验证码登录,传入后password参数将失效
接口地址 :/login/cellphone
// 获取手机验证码export function reqCaptcha(phone, ctcode) { return request('/captcha/sent', 'get', { 'phone': phone, 'ctcode': ctcode })}// 验证验证码export function verifyCaptcha(phone, captcha, ctcode) { return request('/captcha/verify', 'get', { 'phone': phone, 'captcha': captcha, 'ctcode': ctcode })}// 手机号+验证码登录export function loginCellphoneByCaptcha(phone, captcha) { return request('/login/cellphone', 'post', { 'phone': phone, 'captcha': captcha })}// 手机号+密码登录export function loginCellphoneByPassword(phone, password) { return request('/login/cellphone', 'post', { 'phone': phone, 'password': password })}国家编码列表
说明 : 调用此接口,可获取国家编码列表
接口地址 :/countries/code/list
// 获取国家编码列表export function reqCountriesCodeList() { return request('/countries/code/list', 'get');}3. 手机号+密码登录<script>export default { data () { return { isShowLogin: false, // 是否展示登录框 loginMethod: 'QR', // 登录方法 ['QR', 'phone'] phoneLoginOrRegister: '', // 手机号登录或注册 ['', 'login', 'register'] loginwithPassword: false, // 使用密码还是验证码登录 qrUrl: '', // 二维码 isUpdate: false, // 是否需要更新二维码 timer: null, // 定时器用来检查二维码状态 agree: false, // 是否勾选协议 countryCode: '86', // 手机号国家编码 countriesCodeList: [], // 国家编码列表 isShowCountriesCodeList: false, // 是否展示国家编码列表 phone: '', // 手机号 password: '', // 密码 captcha: '', // 验证码 message: '', // 提示信息（手机号、验证码、密码校验错误信息） countDown: 60, // 获取验证码的倒计时 countdownTimer: null, // 倒计时计时器 checkPassword: true, // 验证手机号和密码是否正确 } }, methods: { // 打开登录窗口 openLoginBox() { this.isShowLogin = true this.loginMethod = 'QR' // 默认打开是二维码登录方式 this.getQRCode() // 获取二维码 }, // 关闭登录窗口 closeLoginBox() { this.isShowLogin = false this.loginMethod = 'QR' this.phoneLoginOrRegister = '' this.agree = false this.countryCode = '86' this.phone = '' this.password = '' this.captcha = '' this.message = '' this.countDown = 60 clearInterval(this.timer) clearInterval(this.countdownTimer) }, // 生成二维码 async getQRCode() { let result1 = await this.$api.reqLoginQRKey() let key = result1.data.unikey let result2 = await this.$api.reqLoginQRCreate(key) this.qrUrl = result2.data.qrimg this.isUpdate = false this.checkQRState(key) // 检查二维码状态 }, // 检查二维码状态 checkQRState(key) { this.timer = setInterval(async () => { try { let result = await this.$api.reqLoginQRCheck(key) if (result.code === 800) { // 二维码过期 this.isUpdate = true clearInterval(this.timer) } else if (result.code === 803) { // 授权登录成功 this.$store.dispatch('user/setCookie', result.cookie) // 根据cookie获取账号信息 let result2 = await this.$api.reqUserAccount(result.cookie) if (result2.code === 200) { this.userImg = result2.profile.avatarUrl this.$store.dispatch('user/setUserId', result2.account.id) this.$store.dispatch('user/setUserInfo', result2.profile) } this.isLogin = true this.closeLoginBox() // 关闭登录窗口 location.reload() } } catch (err) { this.$message.error(err.message) } }, 5000) }, // 切换登录方式 changeLoginMethod() { this.loginMethod = this.loginMethod === 'QR' ? 'phone' : 'QR' if (this.loginMethod === 'QR') { // 二维码登录 this.getQRCode() } else { // 其他方式登录 clearInterval(this.timer) if (this.countriesCodeList.length === 0) { // 获取国家编码列表 this.getCountriesCodeList() } } }, // 获取国家编码列表 async getCountriesCodeList() { let result = await this.$api.reqCountriesCodeList() for (let item of result.data) { this.countriesCodeList = [ ...this.countriesCodeList, ...item.countryList, ] } }, // 修改手机号国家编码 chooseCountryCode(index) { this.countryCode = this.countriesCodeList[index].code this.isShowCountriesCodeList = false }, // 点击手机号登录按钮 loginWithPhone() { if (this.agree) { this.phoneLoginOrRegister = 'login' // 切换到手机号登录页面 this.countryCode = '86' } else { // 没有勾选协议 this.$message.warning({ message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》', }) } }, // 点击手机号注册按钮 registerWithPhone() { if (this.agree) { this.phoneLoginOrRegister = 'register' // 切换到手机号注册页面 this.countryCode = '86' } else { // 没有勾选协议 this.$message.warning({ message: '请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》', }) } }, // 手机号密码登录或验证码登录切换 changePasswordOrCaptcha() { this.loginwithPassword = !this.loginwithPassword this.message = '' }, // 检查手机号格式是否正确 checkPhone() { let re = /^[1][3,4,5,6.7,8,9][0-9]{9}$/ return re.test(this.phone) }, // 检查验证码格式是否正确 checkCaptcha() { let re = /^[0-9]{4}$/ return re.test(this.captcha) }, // 获取验证码 async sendCode() { // 手机号为空 if (this.phone === '') { this.message = '请输入手机号' return } // 手机号格式错误 if (!this.checkPhone()) { this.message = '手机号码格式错误，请更换后重试' return } let result = await this.$api.reqCaptcha(this.phone, this.countryCode) if (result.code !== 200) { this.$message.error('验证码发送失败，请稍后重试') } else { // 获取验证码倒计时 this.countdownTimer = setInterval(() => { if (this.countDown === 0) { this.countDown = 60 this.$refs.captchaButton.innerHTML = '获取验证码' clearInterval(this.countdownTimer) } else { this.countDown-- this.$refs.captchaButton.innerHTML = this.countDown + '秒后重试' } }, 1000) } }, // 验证手机号和验证码 async loginCellphoneByCaptcha() { if (this.phone === '') { this.message = '请输入手机号' return } else { if (!this.checkPhone()) { this.message = '请输入正确的手机号' return } } if (this.captcha === '') { this.message = '请输入验证码' return } else { if (!this.checkCaptcha()) { this.message = '短信验证码格式错误' return } } let result = await this.$api.verifyCaptcha( this.phone, this.captcha, this.countryCode ) if (result.code !== 200) { this.message = '请输入正确的短信验证码' } else { try { let result2 = await this.$api.loginCellphoneByCaptcha( this.phone, this.captcha ) if (result2.code === 200) { this.$store.dispatch('user/setCookie', result2.cookie) this.$store.dispatch('user/setUserInfo', result2.profile) this.$store.dispatch('user/setUserId', result2.account.id) this.userImg = result2.profile.avatarUrl this.isLogin = true this.closeLoginBox() location.reload() } } catch (err) { this.$message.error(err) } } }, // 手机号+密码登录 async loginCellphoneByPassword() { if (this.phone === '') { this.message = '请输入手机号' return } else { if (!this.checkPhone(this.phone)) { this.message = '请输入正确的手机号' return } } if (this.password === '') { this.message = '请输入密码' return } let result = await this.$api.loginCellphoneByPassword( this.phone, this.password ) if (result.code === 200) { this.message = '' // 成功登录 this.$store.dispatch('user/setCookie', result.cookie) this.$store.dispatch('user/setUserInfo', result.profile) this.$store.dispatch('user/setUserId', result.account.id) this.userImg = result.profile.avatarUrl this.isLogin = true this.closeLoginBox() location.reload() } else { this.message = '手机号或密码错误' } } }}</script>关键词：音乐,练习
