如何在运行函数之前弹出或提示验证密码

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

由于您为此使用了角度和角度材质，因此您可以在单击按钮时使用对话框弹出并返回输入值并检查您的秘密。

即使输入在您键入时不显示密码，请记住数据被"保存"为字符串，并且未以任何方式加密。

点击这里查看我在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();
}
}

TS for AppComponent：

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
}
});
}
}

Answer 2

您可以使用模态(弹出窗口(来执行此操作

下面是其工作原理的示例：

在您的 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;
}

感谢Jason Watmore的模态示例plnkr。