angular - 在 Angular 7 中实现 bcrypt

Question

我正在尝试使用 bcrypt 和 Angular7 在 MySQL 中存储加密密码。

我已经使用 npm install bcrypt 安装 bcrypt 并像这样导入它从“bcrypt”导入 * 作为 bcrypt；。

到目前为止，一切都编译正常；当我添加 bcrypt.hash()

时它没有这样做

login.component.ts 文件的完整代码如下:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as bcrypt from 'bcrypt';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent implements OnInit {

loginForm : FormGroup;
success = false;
loginFailed = false;

constructor(private formBuilder : FormBuilder) { }

ngOnInit() : void {

    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
}

DoLogin()
{
    console.log(this.loginForm.value);

    pass = bcrypt.hash('Pass@123', 10); // App is not compliling when I add this line //
}

如何调用 bcrypt 中的方法？

Answer 1

您可以安装 bcryptjs(npm install bcryptjs)并使用以下代码:

import * as bcrypt from 'bcryptjs';

const salt = bcrypt.genSaltSync(10);
pass = bcrypt.hashSync(this.loginForm.value.password, salt);

您的代码必须如下所示:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as bcrypt from 'bcryptjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent implements OnInit {

loginForm : FormGroup;
success = false;
loginFailed = false;

constructor(private formBuilder : FormBuilder) { }

ngOnInit() : void {

    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
}

DoLogin()
{
    console.log(this.loginForm.value);

    const salt = bcrypt.genSaltSync(10);
    pass = bcrypt.hashSync('Pass@123', 10);
}

在那之后，如果您遇到 Module not found: Error: Can't resolve 'crypto'... 错误，您必须将此代码添加到 packaje.json 文件中:

"browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }

希望对大家有帮助。