问题描述
我对VueJS中的bcrypt使用感到困惑...
我正在使用VueJS作为FE和NodeJS作为BE(+ Postgres作为数据库)的示例应用程序。
在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":"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":"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,hash) {
console.log(hash)
passwordHash = hash
})
})
console.log(passwordHash)
第一个console.log(hash)返回哈希值,但另一个返回“未定义”
我该如何从该部分中获取该哈希值?很抱歉提出这样一个la脚的问题
EDIT2:
好吧,我终于开始工作了:)实际上,它比我想象的要容易得多...
我将在这里为其他人保留步骤(以防万一)
安装bcryptjs
npm install --save bcryptjs
将bcrypt导入Vue模板并使用
<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>
解决方法
我认为这与在节点上进行操作没有什么不同(当然,除非您正在执行文件IO)。
签出此site
HTH
,您可以在vue.js中使用bcryptjs https://github.com/dcodeIO/bcrypt.js/
示例代码:
{{1}}
这是示例。我相信这可以为您提供帮助。 https://github.com/Ichag/vue-htpasswd