Angular 15中使用bcryptjs遇polyfill问题求助

问题原因 #

bcryptjs原本面向Node.js环境开发，依赖crypto、Buffer等Node.js内置API，但浏览器环境默认不提供这些API。Angular 15移除了传统的polyfills.ts配置文件，不会自动为这些Node.js模块添加polyfill，因此出现报错。同时你代码中误用了异步的genSalt方法（该方法返回Promise），直接赋值给字符串类型的salt也会导致后续hashSync执行失败。

解决方案 #

1. 安装必要依赖

安装浏览器端polyfill包和自定义webpack构建器：

npm install buffer crypto-browserify @angular-builders/custom-webpack --save-dev

2. 添加自定义webpack配置

在项目根目录创建webpack.config.js文件，配置webpack来提供缺失的Node.js API：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  ],
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      buffer: require.resolve('buffer'),
    },
  },
};

3. 修改Angular构建配置

打开angular.json，将项目的build和serve构建器替换为自定义webpack构建器，并指定配置文件路径：

"projects": {
  "[你的项目名称]": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          // 保留原有其他配置项
        }
      },
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        // 保留原有其他配置项
      }
    }
  }
}

4. 修正组件代码

将genSalt替换为同步版本genSaltSync，并将变量声明为组件属性以便模板访问：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  password!: string;
  salt!: string;
  hashedpassword!: string;

  ngOnInit(): void {
    this.password = "anypasswordthatssave&5$5";
    this.salt = bcrypt.genSaltSync(10);
    this.hashedpassword = bcrypt.hashSync(this.password, this.salt);
  }
}

替代方案 #

如果不想配置polyfill，可选择浏览器原生支持或专为浏览器设计的哈希库，比如使用Web Crypto API实现哈希，或者使用crypto-js等轻量库。

内容的提问来源于stack exchange，提问作者Mathanuel