From b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 23 四月 2025 13:35:06 +0800
Subject: [PATCH] UA 整理提交
---
src/views/login/components/face/FaceLogin.vue | 444 +++++++++++++++++++++++++-----------------------------
1 files changed, 206 insertions(+), 238 deletions(-)
diff --git a/src/views/login/components/face/FaceLogin.vue b/src/views/login/components/face/FaceLogin.vue
index b42bfa5..e2534dd 100644
--- a/src/views/login/components/face/FaceLogin.vue
+++ b/src/views/login/components/face/FaceLogin.vue
@@ -6,254 +6,222 @@
<p class="text">{{ faceDetect }}</p>
</div>
</template>
-<script>
+<script setup name="FaceLogin">
+ import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import faceManager from "./faceManager.js";
import { uKeyLogin } from "@/api/user";
- import store from '@/store';
- import { mapState } from 'pinia';
+ import { useUKeyStore } from "@/store/ukey";
+ import { storeToRefs } from 'pinia';
import useElement from '@/hooks/useElement.js';
+ import { useRoute, useRouter } from 'vue-router';
import { getToken, removeToken, setToken, getUname, setUname, removeUname, getUrole, setUrole, removeUrole } from '@/utils/auth';
+ const ukeyStore = useUKeyStore();
+ const { isIn, connect, id } = storeToRefs(ukeyStore);
+ const route = useRoute();
+ const router = useRouter();
const { $loading, $confirm, $message } = useElement();
// import const_num from "@/assets/js/const/const_num";
// import RSA from "@/assets/js/tools/RSA";
- export default {
- props: {
- faceShow: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {
- status: true,
- faceDetect: "璇峰皢姝ｈ劯瀵瑰噯鎽勫儚澶�",
- imageBase64: "",
- newstream: "",
- intTime: null,
- postTime: null,
- setTime: null,
- redirect: undefined,
- otherQuery: {}
- };
- },
- watch: {
- $route: {
- handler: function (route) {
- const query = route.query;
- if (query) {
- this.redirect = query.redirect;
- this.otherQuery = this.getOtherQuery(query);
- }
- },
- immediate: true
- }
- },
- computed: {
- ...mapState(store.ukey, ['isIn', 'connect', 'id']),
- },
- mounted() {
- this.faceChange();
- },
- beforeUnmount() {
- // console.log('beforeUnmount ', '=============');
+ const props = defineProps({
+ faceShow: {
+ type: Boolean,
+ default: false
+ }
+ });
+ const status = ref(true);
+ const faceDetect = ref("璇峰皢姝ｈ劯瀵瑰噯鎽勫儚澶�");
+ const imageBase64 = ref("");
+ const newstream = ref("");
+ const intTime = ref(null);
+ const postTime = ref(null);
+ const setTime = ref(null);
+ const redirect = ref(undefined);
+ const otherQuery = ref({});
+ const video = ref(null);
+ const canvas = ref(null);
+
+ watch(
+ () => route.path,
+ (_route) => {
+ const query = _route.query;
+ if (query) {
+ redirect.value = query.redirect;
+ otherQuery.value = getOtherQuery(query);
+ }
+ },
+ { immediate: true }
+ );
- this.status = false;
- this.clearVideo();
- },
- methods: {
- getOtherQuery(query) {
- return Object.keys(query).reduce((acc, cur) => {
- if (cur !== 'redirect') {
- acc[cur] = query[cur];
- }
- return acc;
- }, {});
- },
- // 鍏抽棴鎽勫儚澶�
- clearVideo: function () {
- // 鍏抽棴瀹氭椂鍣�
- clearInterval(this.intTime);
- clearInterval(this.postTime);
- clearTimeout(this.setTime);
- // 鍏抽棴鎽勫儚澶�
- for (let track of this.newstream.getTracks()) {
- track.stop();
- }
- },
- // 鑾峰彇鍥剧墖
- getImg: function () {
- let vm = this;
- let video = vm.$refs.video;
- let canvas = vm.$refs.canvas;
- let context = canvas.getContext("2d");
- context.drawImage(video, 0, 0, 480, 320);
- // 鑾峰彇鍥剧墖base64閾炬帴
- vm.imageBase64 = canvas.toDataURL("image/png");
- },
- // 浜鸿劯妫�娴�
- faceChange: function () {
- let vm = this;
- // 鎭㈠鎻愮ず璇�
- vm.faceDetect = "璇峰皢姝ｈ劯瀵瑰噯鎽勫儚澶�";
- // vm.faceShow = true;
- if (
- navigator.mediaDevices.getUserMedia ||
- navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia
- ) {
- //璋冪敤鐢ㄦ埛濯掍綋璁惧, 璁块棶鎽勫儚澶�
- this.getUserMedia(
- { video: { width: 480, height: 320 } },
- this.success,
- this.error
- );
- } else {
- alert("涓嶆敮鎸佽闂敤鎴峰獟浣�");
- }
- },
- //璁块棶鐢ㄦ埛濯掍綋璁惧鐨勫吋瀹规柟娉�
- getUserMedia: function (constraints, success, error) {
- if (navigator.mediaDevices.getUserMedia) {
- //鏈�鏂扮殑鏍囧噯API
- navigator.mediaDevices
- .getUserMedia(constraints)
- .then(success)
- .catch(error);
- } else if (navigator.webkitGetUserMedia) {
- //webkit鏍稿績娴忚鍣�
- navigator.webkitGetUserMedia(constraints, success, error);
- } else if (navigator.mozGetUserMedia) {
- //firfox娴忚鍣�
- navigator.mozGetUserMedia(constraints, success, error);
- } else if (navigator.getUserMedia) {
- //鏃х増API
- navigator.getUserMedia(constraints, success, error);
- }
- },
- // 鎴愬姛鍥炶皟
- success: function (stream) {
- let vm = this;
- //鍏煎webkit鏍稿績娴忚鍣�
- let CompatibleURL = window.URL || window.webkitURL;
- //灏嗚棰戞祦璁剧疆涓簐ideo鍏冪礌鐨勬簮
- // console.log(stream);
- // stream = stream;
- this.newstream = stream;
- //video.src = CompatibleURL.createObjectURL(stream);
- let video = this.$refs.video;
- video.srcObject = stream;
- video.play();
- this.intTime = setInterval(() => {
- vm.getImg();
- }, 0);
- setTimeout(function () {
- vm.facePost();
- }, 0);
- },
- error: function (error) {
- console.log(error);
- console.log(`璁块棶鐢ㄦ埛濯掍綋璁惧澶辫触${error.name}, ${error.message}`);
- },
- // 璇锋眰鍚庡彴楠岃瘉浜鸿劯
- facePost: function () {
- if (!this.isIn) {
- this.faceDetect = "璇峰厛鎻掑叆ukey";
- this.setTime = setTimeout(() => {
- this.facePost();
- }, 500);
- } else if (!this.imageBase64) {
- this.faceDetect = "浜鸿劯璇嗗埆涓�...";
- this.setTime = setTimeout(() => {
- this.facePost();
- }, 500);
- } else {
- let vm = this;
- faceManager
- .faceVerify('"' + vm.imageBase64 + '"', this.id)
- .then((result) => {
- let res = result;
- console.log(res);
- if (res.code === 1 && res.data) {
- vm.faceDetect = "鍖归厤鎴愬姛";
- let user = res.data2[0];
- setTimeout(() => {
- // vm.onLogin();
- // $message.success("鐧诲綍鎴愬姛");
- setUname(user.uname);
- setToken('admin');
- setUrole(user.urole);
- this.$router.push({ path: this.redirect || '/', query: this.otherQuery });
- // this.$router.push("/home");
- // // // 璁剧疆鐢ㄦ埛鐨勬潈闄�
- // // this.$store.dispatch("user/getPermits");
- }, 1000);
- } else {
- vm.faceDetect = res.msg;
- if (vm.status == true) {
- this.setTime = setTimeout(() => {
- this.facePost();
- }, 3000);
- }
- }
- })
- .catch((err) => {
- vm.faceDetect = "缃戠粶閾炬帴澶辫触";
- if (vm.status == true) {
- this.setTime = setTimeout(() => {
- this.facePost();
- }, 3000);
- }
- });
- }
- },
- // 鐧婚檰璁剧疆sessionStorage
- onLogin: function () {
- faceManager
- .getUserName()
- .then((res) => {
- let { code, data } = res;
- if (code == 1) {
- this.uKeyLogin(data.uname, data.usnid);
- }
- })
- .catch((err) => {
- console.log(err);
- });
- },
- uKeyLogin(username, password) {
- // ukey鐧诲綍
- uKeyLogin(username, password, this.id, true)
- .then((res) => {
- console.log('res', res, '=============');
+ onMounted(() => {
+ faceChange();
+ });
- // 瀵圭粨鏋滆繘琛屽鐞�
- this.handleLogin(res, username);
- })
- .catch((error) => {
- // 鍏抽棴绛夊緟
- this.loading = false;
- this.faceDetect = "缃戠粶寮傚父";
- this.facePost();
- });
- },
- handleLogin(res, username) {
- let rs = res.data;
- if (rs.code == 1) {
- this.$message.success("鐧诲綍鎴愬姛");
- sessionStorage.setItem("username", username);
- sessionStorage.setItem("userId", rs.data);
- this.$router.push("/home");
- // 璁剧疆鐢ㄦ埛鐨勬潈闄�
- this.$store.dispatch("user/getPermits");
- } else {
- this.faceDetect = rs.msg;
- this.facePost();
- }
- },
- },
- };
+ onBeforeUnmount(() => {
+ status.value = false;
+ clearVideo();
+ });
+
+ function getOtherQuery(query) {
+ return Object.keys(query).reduce((acc, cur) => {
+ if (cur !== 'redirect') {
+ acc[cur] = query[cur];
+ }
+ return acc;
+ }, {});
+ }
+
+ function clearVideo() {
+ clearInterval(intTime.value);
+ clearInterval(postTime.value);
+ clearTimeout(setTime.value);
+ for (let track of newstream.value.getTracks()) {
+ track.stop();
+ }
+ }
+
+ function getImg() {
+ let _video = video.value;
+ let _canvas = canvas.value;
+ let _context = _canvas.getContext("2d");
+ _context.drawImage(_video, 0, 0, 480, 320);
+ // 鑾峰彇鍥剧墖base64閾炬帴
+ imageBase64.value = _canvas.toDataURL("image/png");
+ }
+
+ function faceChange() {
+ faceDetect.value = "璇峰皢姝ｈ劯瀵瑰噯鎽勫儚澶�";
+ if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
+ //璋冪敤鐢ㄦ埛濯掍綋璁惧, 璁块棶鎽勫儚澶�
+ getUserMedia(
+ { video: { width: 480, height: 320 } },
+ success,
+ error
+ );
+ } else {
+ alert("涓嶆敮鎸佽闂敤鎴峰獟浣�");
+ }
+ }
+
+ function getUserMedia(constraints, success, error) {
+ if (navigator.mediaDevices.getUserMedia) {
+ //鏈�鏂扮殑鏍囧噯API
+ navigator.mediaDevices
+ .getUserMedia(constraints)
+ .then(success)
+ .catch(error);
+ } else if (navigator.webkitGetUserMedia) {
+ //webkit鏍稿績娴忚鍣�
+ navigator.webkitGetUserMedia(constraints, success, error);
+ } else if (navigator.mozGetUserMedia) {
+ //firfox娴忚鍣�
+ navigator.mozGetUserMedia(constraints, success, error);
+ } else if (navigator.getUserMedia) {
+ //鏃х増API
+ navigator.getUserMedia(constraints, success, error);
+ }
+ }
+
+ function success(stream) {
+ //鍏煎webkit鏍稿績娴忚鍣�
+ let CompatibleURL = window.URL || window.webkitURL;
+ //灏嗚棰戞祦璁剧疆涓簐ideo鍏冪礌鐨勬簮
+ newstream.value = stream;
+ video.value.srcObject = stream;
+ video.value.play();
+ intTime.value = setInterval(() => {
+ getImg();
+ }, 0);
+ setTimeout(() => {
+ facePost();
+ }, 0);
+ }
+
+ function error(_error) {
+ console.log(`璁块棶鐢ㄦ埛濯掍綋璁惧澶辫触${_error.name}, ${_error.message}`);
+ }
+
+ function facePost() {
+ if (isIn.value) {
+ faceDetect.value = "璇峰厛鎻掑叆ukey";
+ setTime.value = setTimeout(() => {
+ facePost();
+ }, 500);
+ } else if (!imageBase64.value) {
+ faceDetect.value = "浜鸿劯璇嗗埆涓�...";
+ setTime.value = setTimeout(() => {
+ facePost();
+ }, 500);
+ } else {
+ faceManager
+ .faceVerify('"' + imageBase64.value + '"', id.value)
+ .then((result) => {
+ let res = result;
+ if (res.code == 1 && res.data) {
+ faceDetect.value = '鍖归厤鎴愬姛';
+ let user = res.data2[0];
+ setTimeout(() => {
+ setUname(user.uname);
+ setToken('admin');
+ setUrole(user.urole);
+ router.push({path: redirect.value || '/', query: otherQuery.value});
+ }, 1000);
+ } else {
+ faceDetect.value = res.msg;
+ if (status.value == true) {
+ setTime.value = setTimeout(() => {
+ facePost();
+ }, 3000);
+ }
+ }
+ }).catch((err) => {
+ faceDetect.value = '缃戠粶閾炬帴澶辫触';
+ if (status.value == true) {
+ setTime.value = setTimeout(() => {
+ facePost();
+ }, 3000);
+ }
+ });
+ }
+ }
+
+ function onLogin () {
+ faceManager.getUserName().then((res) => {
+ let { code, data } = res;
+ if (code == 1) {
+ uKeyLoginFn(data.uname, data.usnid);
+ }
+ }).catch((err) => {
+ console.log(err);
+ });
+ }
+
+ function uKeyLoginFn(username, password) {
+ uKeyLogin(username, password, id.value, true).then((res) => {
+ handleLogin(res, username);
+ }).catch((err) => {
+ console.log(err);
+ loading.value = false;
+ faceDetect.value = "缃戠粶寮傚父";
+ facePost();
+ });
+ }
+
+ function handleLogin(res, username) {
+ let rs = res.data;
+ if (rs.code == 1) {
+ $message.success("鐧诲綍鎴愬姛");
+ sessionStorage.setItem("username", username);
+ sessionStorage.setItem("userId", rs.data);
+ router.push("/home");
+ // 璁剧疆鐢ㄦ埛鐨勬潈闄�
+ // store.dispatch("user/getPermits");
+ } else {
+ faceDetect.value = rs.msg;
+ facePost();
+ }
+ }
+
</script>
<style lang="scss" scoped>
.text {
--
Gitblit v1.9.1