页面二次认证

页面二次认证功能有什么用？

通过在页面上设置密码（passcode），增强了页面的安全性。用户访问设置了密码的页面时，需要输入正确的密码，才能正常访问页面，否则无法访问。用户输入正确密码后，一段时间内不需要再次输入密码认证。该时间长度可通过修改页面上的配置来调整。详见页面加入组件部分的说明。

为页面配置 二次认证

1. 结构修改：在数据库_page表中增加一列：passcode，数据类型为VARCHAR(255)。

   ALTER TABLE `_page`  ADD COLUMN `passcode` varchar(255) NULL COMMENT '页面二次认证; passcode ' AFTER `sort`;

2. 为页面配置密码：在_page表中，找到要添加密码的页面，在passcode字段中输入密码，并保存。
   注意：若passcode字段密码为空，则等同于该页面没有设置密码。

3. 在页面内添加如下代码。

      <!-- 页面认证弹窗 >>>>>>>>>>>>> -->
      <v-dialog
        v-model="isPageValidationDialogShown" persistent="true" :hide-overlay="false"
        overlay-opacity="1"
        transition="dialog-top-transition" max-width="600">
        <v-card>
          <v-toolbar color="primary text-h7 pl-5" dark>页面认证</v-toolbar>
          <v-card-text>
            <v-row class="px-10 pt-5">
              <v-col cols="12" :class="{'pa-0': isMobile, 'px-4': isMobile, 'pt-6': isMobile}">
                <span class="jh-input-label">认证码</span>
                <v-text-field class="jh-v-input" dense filled single-line type="password" v-model="passcodeOfUser"></v-text-field>
                <p style="text-align: right;">认证成功后, {{ validationDurationHour }}小时内无需重复认证。</p>
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn depressed class="mr-2 primary" @click="doUiAction('doPageValidation')">确定</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <!-- <<<<<<<<<<< 页面认证弹窗 -->
      passcodeOfServer: '<$ page.passcode $>',
      passcodeOfUser: null,
    //   --------------- 二次认证 uiAction >>>>>>>>>>  ---------------
    async preparePageValidationData() {
      const urlPathList = window.location.pathname.split('/');
      this.pageId = urlPathList && urlPathList[urlPathList.length - 1];
    },
    checkAndOpenPageValidationDialog() {
      if (!this.passcodeOfServer) {
        this.isPageValidationDialogShown = false
        return;
      }
      const pageValidation = this.getPageValidationCache({pageId: this.pageId});
      const {date, success} = pageValidation;
      let duration = 999999;
      try {
        duration = dayjs().diff(date, 'hour');
        // duration = dayjs().diff(date, 'minute');
        // duration = dayjs().diff(date, 'second');
      } catch (error) {
        console.error("[created]", "date 解析异常");
      }
      if (success === true && duration < this.validationDurationHour) {
        this.isPageValidationDialogShown = false;
        return;
      }
      this.isPageValidationDialogShown = true
    },
    getPageValidationCache({pageId}) {
      let pageValidationObj = {}
      try {
        const pageValidationObjStr = localStorage.getItem(`${window.appInfo.appId}_page_validation_obj`);
        pageValidationObj = JSON.parse(pageValidationObjStr || '{}');
      } catch (error) {
        console.error("[getPageValidationCache]", "json 数据异常");
      }
      return pageValidationObj[pageId] || {};
    },
    cachePageValidation({pageId, value}) {
      let pageValidationObj = {}
      try {
        const pageValidationObjStr = localStorage.getItem(`${window.appInfo.appId}_page_validation_obj`);
        pageValidationObj = JSON.parse(pageValidationObjStr || '{}');
      } catch (error) {
        console.error("[cachePageValidation]", "json 数据异常");
      }
      pageValidationObj[pageId] = value;
      localStorage.setItem(`${window.appInfo.appId}_page_validation_obj`, JSON.stringify(pageValidationObj));
    },
    doPageValidation() {
      if (this.passcodeOfUser !== this.passcodeOfServer) {
        window.vtoast.fail({message: '页面认证失败'});
      }
      if (this.passcodeOfUser === this.passcodeOfServer) {
        this.cachePageValidation({
          pageId: this.pageId,
          value: {
            pageId: this.pageId,
            date: dayjs(),
            success: true,
          }
        });
        this.isPageValidationDialogShown = false;
      }
    },
    //   --------------- <<<<<<<<<< 二次认证 uiAction  ---------------

   其中，validationDurationHour是当前密码认证的有效期，以小时计算。修改此数值即可调整密码认证的有效期。

4. 重新访问页面，就需要输入页面密码了。