Question

我正在寻找一种在运行功能之前将验证密码作为提示或弹出窗口的方法。例如：单击按钮并运行一个函数后，将弹出一个窗口，要求写YESRUNFUNCTION，然后单击“确定”，该函数将以一种验证方式运行。

这是我用于js确认的代码

  generate() {
    if(confirm("WARNING! you are about to generate a new Lot #. YOU CAN'T UNDO IT")) {
    const sku = this.myControl.value;
    if (sku) {
      this.lotService.getCurrentLotNumber(sku).subscribe(result => {
        let lotNumber = 'MY';
        
        const dt = new Date();
        this.date = dt;
        const year_time = dt.getFullYear();

        var d = new Date();
        var n = d.getMonth();
         
         if (n < 10 ) {
          this.foo = n+1;
        }
        if ( n === 9 ) {           
             this.foo= 'O';
        }
        if ( n === 10 ) {           
          this.foo= 'N';
     }
     if ( n === 11 ) {           
      this.foo= 'D';
 }

 if (year_time === 2018 ) {
  lotNumber = lotNumber + 'R'+ this.foo;
}
if (year_time === 2019) {
  lotNumber = lotNumber + 'S'+ this.foo;
}
if (year_time === 2020) {
  lotNumber = lotNumber + 'T'+ this.foo;
}

if (year_time === 2021) {
  lotNumber = lotNumber + 'U'+ this.foo;
}

if (year_time === 2022) {
  lotNumber = lotNumber + 'V'+ this.foo;
}
if (year_time === 2023) {
  lotNumber = lotNumber + 'W'+ this.foo;
}
if (year_time === 2024) {
  lotNumber = lotNumber + 'X'+ this.foo;
}
if (year_time === 2025) {
  lotNumber = lotNumber + 'Y'+ this.foo;
}
if (year_time === 2026) {
  lotNumber = lotNumber + 'Z'+ this.foo;
}

        lotNumber += result;
        this.lotService.saveLotNumber(sku, lotNumber).subscribe(res => {
          if (res && res.sku == sku) {
            this.lot_number = lotNumber + 'W';
            this.loadLastLot(sku);
          }
        });
      });
    }
  }
}

 <mat-chip-list>
    <mat-chip color="accent" selected (click)="generate()" > Generate New Lot #</mat-chip>
  </mat-chip-list>

Answer 1

您可以使用模式（弹出窗口）来执行此操作

Here是此方法工作方式的一个示例：

在您的html中：

<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
            <h1>A Custom Modal!</h1>
            <p>
                Enter the password: <input type="text" [(ngModel)]="passwordText" />
            </p>
            <button (click)="generate();">Run generate function</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

然后，在您的打字稿中，声明与ngModel绑定的变量。绑定到ngModel（passwordText）的变量将与用户在模式密码提示符下输入的内容完全相同。

  private passwordText: any;

  generate() {
    // prevent function from running if password is incorrect
    if (this.passwordText !== 'some password') {
      return;
    }
   // your current code goes here
  }

以及要创建的模态的CSS，取自链接：

/* MODAL STYLES
-------------------------------*/
modal {
    /* modals are hidden by default */
    display: none;

    .modal {
        /* modal container fixed across whole screen */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        /* z-index must be higher than .modal-background */
        z-index: 1000;

        /* enables scrolling for tall modals */
        overflow: auto;

        .modal-body {
            padding: 20px;
            background: #fff;

            /* margin exposes part of the modal background */
            margin: 40px;
        }
    }

    .modal-background {
        /* modal background fixed across whole screen */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        /* semi-transparent black  */
        background-color: #000;
        opacity: 0.75;

        /* z-index must be below .modal and above everything else  */
        z-index: 900;
    }
}

body.modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}

为模式示例plnkr致谢Jason Watmore。

Answer 2

由于您为此使用了Angular和Angular材质，因此您可以在单击按钮并返回输入值并检查您的机密时使用Dialog弹出。

即使您在输入时输入未显示密码，也请记住，数据已作为字符串“保存”，并且没有以任何方式加密。

单击here以在Stackblitz上查看我的工作示例。

对话框的HTML：

<h1 mat-dialog-title>WARNING!</h1>
<div mat-dialog-content>
  <p>You are about to generate a new Lot #. YOU CAN'T UNDO IT</p>
  <mat-form-field>
    <input matInput type="password" placeholder="Password" [(ngModel)]="password">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="password" cdkFocusInitial>Ok</button>
</div>

对话的TS：

export class SimpleDialogComponent {
  password = '';

  constructor(
    public dialogRef: MatDialogRef<SimpleDialogComponent>) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

AppComponent的TS：

export class AppComponent  {
  // secret to validate the password
  secret = 'YESRUNFUNCTION';

  constructor(public dialog: MatDialog) {}

  generate(): void {
    const dialogRef = this.dialog.open(SimpleDialogComponent, {
      width: '250px',
    });

    dialogRef.afterClosed().subscribe(password => {
      const isPwdValid = password === this.secret;
      console.log(isPwdValid);
      if (isPwdValid) {
        // run code for correct password 
      } else {
        // run code for wrong password
      }
    });
  }

}

运行功能之前如何具有弹出窗口或提示验证密码

2 个答案: