在Vue项目中使用jsencrypt.js对数据进行加密传输
写在最前边,千万要注意,用此插件加密时,只能是字符串类型,如果是number,加密出来是空!!!血的教训,这个bug我找了大半天才发现安装jsencryptnpm install jsencrypt --dep第一种方法在 axios封装js里 设置api => index.jsimport { JSEncrypt } from 'jsencrypt'const Encry...
·
写在最前边,千万要注意,用此插件加密时,只能是字符串类型,如果是number,加密出来是空!!!血的教训,这个bug我找了大半天才发现
安装jsencrypt
npm install jsencrypt --dep
第一种方法
在 axios封装js里 设置
api => index.js
import { JSEncrypt } from 'jsencrypt'
const Encrypt = new JSEncrypt ();
//加密
//加密一个参数
const doEncrypt = (key) =>{//请求公钥接口获取公钥
return $http.get('/getPublickey').then(res=>{
let publicKey = res.data.publicKey
Encrypt .setPublicKey(publicKey );
return Encrypt.encrypt(key)
})
}
//加密两个参数时
const doEncryptTwo = (key) =>{//请求公钥接口获取公钥
return $http.get('/getPublickey').then(res=>{
let publicKey = res.data.publicKey
Encrypt .setPublicKey(publicKey );
let keyArr;
keyArr = {phoneNum:Encrypt.encrypt(key.phoneNum),password:Encrypt.encrypt(key.password)}
return Encrypt.encrypt(keyArr )
})
}
export default{
login:async (data)=>{//只加密一个参数
data.password = await doEncrypt (data.password);
return $http.post('/login',data)
},
register:(data) = >{//加密两个参数
let c= {
phoneNum:data.phoneNum,
password:data.password
}
data = await doEncryptTwo(c)
return axios.post('/register',data)
}
}
组件内使用时
login(){
let data = {
phoneNum:this.loginForm.phoneNum,
password:this.loginForm.password
}
this.$Api.login(data).then(res=>{
console.log(res)
})
}
第二种方法 不封装直接写在组件里
main.js
引入
import { JSEncrypt } from 'jsencrypt'
组件里 header.vue
loginFun(){
//实例化JSEncrypt
let jse = new this,$jsEncrypt;
//请求公钥接口
this.$Api.publicKey().then(res=>{
if(res.code == 200){
//设置公钥
jse.setPublicKey('------BEGIN PUBLIC KEY-----'+res.resulet+'-----END PUBLTC KEY-----');
//加密
let phoneNum = this.phoneNum+''//强制转字符串
let data = {
phoneNum:jse.encrypt(phoneNum )
}
this.$Api.register(data).then(res=>{
console.log(res)
})
}
})
}
更多推荐
已为社区贡献7条内容
所有评论(0)