VueJS bcrypt 实现

Posted 2023-02-22

【中文标题】VueJS bcrypt 实现

【英文标题】：VueJS bcrypt implementation

【发布时间】：2021-01-11 01:32:26

【问题描述】：

我对 VueJS 中的 bcrypt 使用有点困惑......

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

在 NodeJs 中，加密密码对我来说没有问题，但由于我是安全偏执狂，我不想以纯文本形式将其从 FE 发送到 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) .. https://www.npmjs.com/package/bcrypt

我可以查看其他任何（非）官方文档吗？非常感谢

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

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(hash) 返回哈希值，但另一个返回“未定义”

我要如何从那个部分中取出那个散列？抱歉问了这么一个蹩脚的问题

EDIT2：

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

我会把这里的步骤留给其他人（以防万一）

安装 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>

【参考方案1】：

我认为这应该与在节点上执行它有什么不同（当然，除非您正在执行文件 IO）。

看看这个site

HTH