union-question-web/src/App.vue

<template>
  <div id="app">
    <router-view />

    <!-- check pwd -->
    <el-dialog
      :visible.sync="modalIsShow"
      title="安全校验 "
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      append-to-body
    >
      <el-form ref="modalFormComp" :model="modalForm" :rules="rules">
        <el-form-item label="安全密码" prop="safePassword">
          <el-input
            v-model="modalForm.safePassword"
            type="password"
            class="dialog-input-width"
            auto-complete="off"
            placeholder="输入密码"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import timeMixin from "./mixins/timeMixin";
import { QUESTION_API } from "@/constants/constants";
import { questionSecurityCheckApi } from "./modules/question/api";
import { USER_SIGNIN } from "./modules/portal/store/user";
import { mapActions } from "vuex";

export default {
  name: "App",
  mixins: [timeMixin],
  data() {
    return {
      signalWaiting: false,
      // 安全校验
      modalIsShow: false,
      modalForm: { safePassword: "" },
      rules: {
        safePassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        const unSignalRoutes = [
          "Root",
          "Login",
          "NotFound",
          "CardBuild",
          "LoginOpen",
        ];
        if (val.name && unSignalRoutes.includes(val.name)) {
          this.signalWaiting = false;
          this.clearSetTs();
          return;
        }
        this.onlineSignal();

        const safeRoutes = ["QuestionManage", "PaperManage"];
        if (
          this.user.safeEnable &&
          !this.user.questionUnlock &&
          val.name &&
          safeRoutes.includes(val.name)
        ) {
          this.modalIsShow = true;
        }
      },
    },
  },
  beforeDestroy() {
    this.clearSetTs();
  },
  methods: {
    ...mapActions([USER_SIGNIN]),
    async onlineSignal() {
      if (this.signalWaiting) return;

      this.clearSetTs();
      this.signalWaiting = true;

      let result = true;
      await this.$httpWithoutBar
        .post(QUESTION_API + "/user/online/signal")
        .catch((error) => {
          result = false;
          console.log("signal error", error);
        });
      if (!result) {
        this.signalWaiting = false;
        return;
      }

      this.addSetTime(() => {
        this.signalWaiting = false;
        this.onlineSignal();
      }, 50 * 1000);
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      const res = await questionSecurityCheckApi(
        this.modalForm.safePassword
      ).catch(() => {});
      this.isSubmit = false;
      if (!res) return;

      this.USER_SIGNIN(Object.assign({}, this.user, { questionUnlock: true }));
      this.modalForm.safePassword = "";
      this.modalIsShow = false;
    },
  },
};
</script>