踩坑指南——VUE项目前端使用SM3国密加密
使用场景:在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,在这个过程中使用了很多种方法,最终总结出最简单的一种方法,如下:操作步骤:1.先在项目中使用npm命令安装依赖npm install --save sm-crypto2.页面中部分代码<template>//密码框部分<el-form-item prop="password"><
·
使用场景:在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,在这个过程中使用了很多种方法,最终总结出最简单的一种方法,如下:
操作步骤:1.先在项目中使用npm命令安装依赖
npm install --save sm-crypto
2.页面中部分代码
<template>
//密码框部分
<el-form-item prop="password">
<el-input
:key="passwordType"
v-model="loginForm.passwords"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
autocomplete="on"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
</template>
3.data数据部分
data(){
return{
loginForm: {
username: '',
passwords: '',
password: '',
},
}
}
4.加密方法及点击登录时 ,在表单验证成功后,调用登录接口前调用加密方法
// 加密方法
methods:{
doSM3() {
const sm3 = require('sm-crypto').sm3
this.loginForm.password = sm3(this.loginForm.passwords)
},
//点击登录
handleLogin(){
this.$refs.loginForm.validate((valid) => {
if (valid) {
doSM3()//调用加密方法
this.loginForm.password = doSM3(this.loginForm.passwords)
//调用接口部分,此处省略
} else {
return false
}
})
}
更多推荐
已为社区贡献5条内容
所有评论(0)