踩坑指南——VUE项目前端使用SM3国密加密

使用场景：在我的项目中，甲方要求系统登录时对密码进行加密后再传给后端，指定使用国密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
        }
      })
    
    }