Javascript VueJS bcrypt实现

我对VueJS中的bcrypt用法有点困惑

我正在开发一个示例应用程序，其中VueJS作为FE，NodeJS作为BE（+Postgres作为DB）

在NodeJs中，对我来说加密密码没有问题，但是因为我是安全性偏执狂，所以我不想以明文形式从FE-to-BE发送密码

问题是，我在VueJS中找不到任何关于BCRYPT的文档

我能够安装它：

npm install --save bcrypt

> bcrypt@5.0.0 install /home/fe/node_modules/bcrypt
> node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[bcrypt] Success: "/home/fe/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ bcrypt@5.0.0
added 34 packages from 101 contributors and audited 871 packages in 6.769s

但我不知道如何使用它。。。我找到了这个，但那是给BE（NodeJS）

还有其他（联合国）官方文件我可以查吗？thx很多

编辑： 好的，我能想出这个

let password = 'secret'
let passwordHash
bcrypt.genSalt(10, function(err, salt) {
   bcrypt.hash(password, salt, function(err, hash) {
     console.log(hash)
     passwordHash = hash
   })
})
console.log(passwordHash)

第一个console.log（散列）返回散列，但另一个返回“未定义”

我怎么才能把那部分的大麻弄出来？很抱歉问了这么一个蹩脚的问题

编辑2：

好吧，我终于让它工作了：）它实际上比我想象的要容易得多

我将把这些步骤留给其他人（以防万一）

安装bcryptjs

npm install --save bcryptjs

在Vue模板中导入bcrypt并使用它

<template lang="html">
  <div class="main">
    <label for="password">Password</label>
      <input type="password" class="form-control"
             id="password" placeholder="Password"
             v-model.lazy="customerData.password">
    <button type="submit" class="btn btn-primary"
            @click.prevent="addUser">Add</button>
  </div>
</template>

<script>
    import bcrypt from 'bcryptjs';

    export default {
      data() {
        return {
           password: null
        }
      },
      methods: {
        addUser(){
           console.log(this.encryptPassword(this.password))
        },
        encryptPassword(password)          
          const salt = bcrypt.genSaltSync(10)
          return bcrypt.hashSync(password, salt)
        },
      }
    }

</script>

密码
添加
从“bcryptjs”导入bcrypt；
导出默认值{
数据（）{
返回{
密码：null
}
},
方法：{
addUser（）{
console.log（this.encryptPassword（this.password））
},
加密密码（密码）
常量盐=bcrypt.genSaltSync（10）
返回bcrypt.hashSync（密码，salt）
},
}
}

我认为它与在节点上执行它没有任何区别（当然，除非您正在执行文件IO）

看看这个

嗯