diff --git a/src/api/login.js b/src/api/login.js index 76b2aed..4661946 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -17,6 +17,25 @@ }) } +// 获取二维码 +export function getQrCode() { + return request({ + url: 'qrCode/getCode', + method: 'post' + }) +} + +// 查询是否扫码登录 +export function checkIsLogined(qrcodeId) { + return request({ + url: 'qrCode/checkIsLogined', + method: 'post', + params: { + qrcodeId: qrcodeId + } + }) +} + // 获取用户信息 export function getInfo() { return request({ diff --git a/src/api/login.js b/src/api/login.js index 76b2aed..4661946 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -17,6 +17,25 @@ }) } +// 获取二维码 +export function getQrCode() { + return request({ + url: 'qrCode/getCode', + method: 'post' + }) +} + +// 查询是否扫码登录 +export function checkIsLogined(qrcodeId) { + return request({ + url: 'qrCode/checkIsLogined', + method: 'post', + params: { + qrcodeId: qrcodeId + } + }) +} + // 获取用户信息 export function getInfo() { return request({ diff --git a/src/utils/request.js b/src/utils/request.js index 54336ab..207c584 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -54,6 +54,9 @@ } else if (res.status === 1000) { // 天气网的正常返回 return response.data + } else if (res.code === 501) { + // 扫码返回正常 + return response.data } else { Message({ showClose: true, diff --git a/src/api/login.js b/src/api/login.js index 76b2aed..4661946 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -17,6 +17,25 @@ }) } +// 获取二维码 +export function getQrCode() { + return request({ + url: 'qrCode/getCode', + method: 'post' + }) +} + +// 查询是否扫码登录 +export function checkIsLogined(qrcodeId) { + return request({ + url: 'qrCode/checkIsLogined', + method: 'post', + params: { + qrcodeId: qrcodeId + } + }) +} + // 获取用户信息 export function getInfo() { return request({ diff --git a/src/utils/request.js b/src/utils/request.js index 54336ab..207c584 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -54,6 +54,9 @@ } else if (res.status === 1000) { // 天气网的正常返回 return response.data + } else if (res.code === 501) { + // 扫码返回正常 + return response.data } else { Message({ showClose: true, diff --git a/src/views/login/faceLogin.vue b/src/views/login/faceLogin.vue index a80c3c9..64d3fae 100644 --- a/src/views/login/faceLogin.vue +++ b/src/views/login/faceLogin.vue @@ -104,7 +104,9 @@ }, // 关闭摄像头 stopNavigator() { - this.thisVideo.srcObject.getTracks()[0].stop() + if (this.thisVideo != null && this.thisVideo.srcObject !== null) { + this.thisVideo.srcObject.getTracks()[0].stop() + } } } } diff --git a/src/api/login.js b/src/api/login.js index 76b2aed..4661946 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -17,6 +17,25 @@ }) } +// 获取二维码 +export function getQrCode() { + return request({ + url: 'qrCode/getCode', + method: 'post' + }) +} + +// 查询是否扫码登录 +export function checkIsLogined(qrcodeId) { + return request({ + url: 'qrCode/checkIsLogined', + method: 'post', + params: { + qrcodeId: qrcodeId + } + }) +} + // 获取用户信息 export function getInfo() { return request({ diff --git a/src/utils/request.js b/src/utils/request.js index 54336ab..207c584 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -54,6 +54,9 @@ } else if (res.status === 1000) { // 天气网的正常返回 return response.data + } else if (res.code === 501) { + // 扫码返回正常 + return response.data } else { Message({ showClose: true, diff --git a/src/views/login/faceLogin.vue b/src/views/login/faceLogin.vue index a80c3c9..64d3fae 100644 --- a/src/views/login/faceLogin.vue +++ b/src/views/login/faceLogin.vue @@ -104,7 +104,9 @@ }, // 关闭摄像头 stopNavigator() { - this.thisVideo.srcObject.getTracks()[0].stop() + if (this.thisVideo != null && this.thisVideo.srcObject !== null) { + this.thisVideo.srcObject.getTracks()[0].stop() + } } } } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 7713fc7..cfc91e7 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -43,6 +43,10 @@ + + + +
@@ -61,6 +65,7 @@ import { RSAencrypt } from '@/utils/security' import kaptchaComp from '@/views/login/kaptcha/kaptcha' import FaceLogin from '@/views/login/faceLogin' +import QrCodeLogin from '@/views/login/qrcodeLogin' import { removeCurrentSys, setToken } from '@/utils/auth' import { faceLogin } from '@/api/login' @@ -69,6 +74,7 @@ components: { // 注册组件 FaceLogin, + QrCodeLogin, kaptchaComp: kaptchaComp }, data() { @@ -184,6 +190,9 @@ }) }, handleChangeLoginType() { + // 关闭扫码登录的定时器 + this.$refs.qrcode.tryLoginCount = -1 + // 如果是人脸登录方式则打开摄像头 if (this.loginType === 'face') { // 进入人脸登录页，打开摄像头 @@ -197,6 +206,10 @@ this.tryFaceLogin = false this.tryCount = 0 this.faceList = [] + if (this.loginType === 'qrcode') { + // 二维码扫码登录 + this.$refs.qrcode.initQrCode() + } } }, handleCameraReady() { @@ -253,6 +266,21 @@ this.loginType = 'password' // 切换回密码登录 this.handleChangeLoginType() } + }, + handleQrCodeError() { + this.$message.error('二维码获取失败，请重试或联系管理员') + this.loginType = 'password' // 切换回密码登录 + this.handleChangeLoginType() + }, + handleQrCodeLogin(token) { + // 设置token + setToken(token) + this.$store.commit('SET_TOKEN', token) + + // 跳转页面 + this.$message.success('登录成功') + removeCurrentSys() + this.$router.push({ path: '/' }) } } } diff --git a/src/api/login.js b/src/api/login.js index 76b2aed..4661946 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -17,6 +17,25 @@ }) } +// 获取二维码 +export function getQrCode() { + return request({ + url: 'qrCode/getCode', + method: 'post' + }) +} + +// 查询是否扫码登录 +export function checkIsLogined(qrcodeId) { + return request({ + url: 'qrCode/checkIsLogined', + method: 'post', + params: { + qrcodeId: qrcodeId + } + }) +} + // 获取用户信息 export function getInfo() { return request({ diff --git a/src/utils/request.js b/src/utils/request.js index 54336ab..207c584 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -54,6 +54,9 @@ } else if (res.status === 1000) { // 天气网的正常返回 return response.data + } else if (res.code === 501) { + // 扫码返回正常 + return response.data } else { Message({ showClose: true, diff --git a/src/views/login/faceLogin.vue b/src/views/login/faceLogin.vue index a80c3c9..64d3fae 100644 --- a/src/views/login/faceLogin.vue +++ b/src/views/login/faceLogin.vue @@ -104,7 +104,9 @@ }, // 关闭摄像头 stopNavigator() { - this.thisVideo.srcObject.getTracks()[0].stop() + if (this.thisVideo != null && this.thisVideo.srcObject !== null) { + this.thisVideo.srcObject.getTracks()[0].stop() + } } } } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 7713fc7..cfc91e7 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -43,6 +43,10 @@ + + + +
@@ -61,6 +65,7 @@ import { RSAencrypt } from '@/utils/security' import kaptchaComp from '@/views/login/kaptcha/kaptcha' import FaceLogin from '@/views/login/faceLogin' +import QrCodeLogin from '@/views/login/qrcodeLogin' import { removeCurrentSys, setToken } from '@/utils/auth' import { faceLogin } from '@/api/login' @@ -69,6 +74,7 @@ components: { // 注册组件 FaceLogin, + QrCodeLogin, kaptchaComp: kaptchaComp }, data() { @@ -184,6 +190,9 @@ }) }, handleChangeLoginType() { + // 关闭扫码登录的定时器 + this.$refs.qrcode.tryLoginCount = -1 + // 如果是人脸登录方式则打开摄像头 if (this.loginType === 'face') { // 进入人脸登录页，打开摄像头 @@ -197,6 +206,10 @@ this.tryFaceLogin = false this.tryCount = 0 this.faceList = [] + if (this.loginType === 'qrcode') { + // 二维码扫码登录 + this.$refs.qrcode.initQrCode() + } } }, handleCameraReady() { @@ -253,6 +266,21 @@ this.loginType = 'password' // 切换回密码登录 this.handleChangeLoginType() } + }, + handleQrCodeError() { + this.$message.error('二维码获取失败，请重试或联系管理员') + this.loginType = 'password' // 切换回密码登录 + this.handleChangeLoginType() + }, + handleQrCodeLogin(token) { + // 设置token + setToken(token) + this.$store.commit('SET_TOKEN', token) + + // 跳转页面 + this.$message.success('登录成功') + removeCurrentSys() + this.$router.push({ path: '/' }) } } } diff --git a/src/views/login/qrCodeLogin.vue b/src/views/login/qrCodeLogin.vue new file mode 100644 index 0000000..8297f9a --- /dev/null +++ b/src/views/login/qrCodeLogin.vue @@ -0,0 +1,117 @@ + + + + +