使用场景:在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密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
        }
      })
    
    }
GitHub 加速计划 / vu / vue
109
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐