UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 src/views/login/components/face/FaceLogin.vue

@@ -6,115 +6,104 @@
    <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: {
  const props = defineProps({
         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);
      default: false
               }
            },
            immediate: true
         }
      },
      computed: {
         ...mapState(store.ukey, ['isIn', 'connect', 'id']),
      },
      mounted() {
         this.faceChange();
      },
      beforeUnmount() {
         // console.log('beforeUnmount ', '=============');
  });
  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);

         this.status = false;
         this.clearVideo();
  watch(
    () => route.path,
    (_route) => {
      const query = _route.query;
      if (query) {
        redirect.value = query.redirect;
        otherQuery.value = getOtherQuery(query);
      }
      },
      methods: {
      getOtherQuery(query) {
    { immediate: true }
  );

  onMounted(() => {
    faceChange();
  });

  onBeforeUnmount(() => {
    status.value = false;
    clearVideo();
  });

  function 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()) {
  }
  
  function clearVideo() {
    clearInterval(intTime.value);
    clearInterval(postTime.value);
    clearTimeout(setTime.value);
    for (let track of newstream.value.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);
  }

  function getImg() {
    let _video = video.value;
    let _canvas = canvas.value;
    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
            ) {
    imageBase64.value = _canvas.toDataURL("image/png");
  }

  function faceChange() {
    faceDetect.value = "请将正脸对准摄像头";
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
               //调用用户媒体设备, 访问摄像头
               this.getUserMedia(
      getUserMedia(
                  { video: { width: 480, height: 320 } },
                  this.success,
                  this.error
        success,
        error
               );
            } else {
               alert("不支持访问用户媒体");
            }
         },
         //访问用户媒体设备的兼容方法
         getUserMedia: function (constraints, success, error) {
  }

  function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
               //最新的标准API
               navigator.mediaDevices
@@ -131,129 +120,108 @@
               //旧版API
               navigator.getUserMedia(constraints, success, error);
            }
         },
         // 成功回调
         success: function (stream) {
            let vm = this;
  }

  function success(stream) {
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            // 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();
    newstream.value = stream;
    video.value.srcObject = stream;
    video.value.play();
    intTime.value = setInterval(() => {
      getImg();
            }, 0);
            setTimeout(function () {
               vm.facePost();
    setTimeout(() => {
      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();
  }

  function error(_error) {
    console.log(`访问用户媒体设备失败${_error.name}, ${_error.message}`);
  }

  function facePost() {
    if (isIn.value) {
      faceDetect.value = "请先插入ukey";
      setTime.value = setTimeout(() => {
        facePost();
               }, 500);
            } else if (!this.imageBase64) {
               this.faceDetect = "人脸识别中...";
               this.setTime = setTimeout(() => {
                  this.facePost();
    } else if (!imageBase64.value) {
      faceDetect.value = "人脸识别中...";
      setTime.value = setTimeout(() => {
        facePost();
               }, 500);
            } else {
               let vm = this;
               faceManager
                  .faceVerify('"' + vm.imageBase64 + '"', this.id)
        .faceVerify('"' + imageBase64.value + '"', id.value)
                  .then((result) => {
                     let res = result;
                     console.log(res);
                     if (res.code === 1 && res.data) {
                        vm.faceDetect = "匹配成功";
          if (res.code == 1 && res.data) {
            faceDetect.value = '匹配成功';
                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");
              router.push({path: redirect.value || '/', query: otherQuery.value});
                        }, 1000);
                     } else {
                        vm.faceDetect = res.msg;
                        if (vm.status == true) {
                           this.setTime = setTimeout(() => {
                              this.facePost();
            faceDetect.value = res.msg;
            if (status.value == true) {
              setTime.value = setTimeout(() => {
                facePost();
                           }, 3000);
                        }
                     }
                  })
                  .catch((err) => {
                     vm.faceDetect = "网络链接失败";
                     if (vm.status == true) {
                        this.setTime = setTimeout(() => {
                           this.facePost();
        }).catch((err) => {
          faceDetect.value = '网络链接失败';
          if (status.value == true) {
            setTime.value = setTimeout(() => {
              facePost();
                        }, 3000);
                     }
                  });
            }
         },
         // 登陆设置sessionStorage
         onLogin: function () {
            faceManager
               .getUserName()
               .then((res) => {
  }

  function onLogin () {
    faceManager.getUserName().then((res) => {
                  let { code, data } = res;
                  if (code == 1) {
                     this.uKeyLogin(data.uname, data.usnid);
        uKeyLoginFn(data.uname, data.usnid);
                  }
               })
               .catch((err) => {
    }).catch((err) => {
                  console.log(err);
               });
         },
         uKeyLogin(username, password) {
            // ukey登录
            uKeyLogin(username, password, this.id, true)
               .then((res) => {
                  console.log('res', res, '=============');
  }

                  // 对结果进行处理
                  this.handleLogin(res, username);
               })
               .catch((error) => {
                  // 关闭等待
                  this.loading = false;
                  this.faceDetect = "网络异常";
                  this.facePost();
  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();
               });
         },
         handleLogin(res, username) {
  }

  function handleLogin(res, username) {
            let rs = res.data;
            if (rs.code == 1) {
               this.$message.success("登录成功");
      $message.success("登录成功");
               sessionStorage.setItem("username", username);
               sessionStorage.setItem("userId", rs.data);
               this.$router.push("/home");
      router.push("/home");
               // 设置用户的权限
               this.$store.dispatch("user/getPermits");
      // store.dispatch("user/getPermits");
            } else {
               this.faceDetect = rs.msg;
               this.facePost();
      faceDetect.value = rs.msg;
      facePost();
            }
         },
      },
   };
  }

</script>
<style lang="scss" scoped>
.text {