在vue项目中使用SM4加密登录

原创已于 2024-11-13 00:29:10 修改 · 904 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-11-12 00:28:48 首次发布

Vue项目中实现sm4加密解密

1. Vue实现sm4加密登录操作

1. 安装 sm4util

// 安装
npm install sm4util

2. 使用

1. 创建工具文件

在 utils 文件夹中创建 sm4Util.js 文件

import { SM4Util } from 'sm4util'

var sm4 = new SM4Util()
const pwdKey = "B@_Aute*1Z5OdS0*"; //密钥  前后端一致即可,后端提供

/* 
 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
  return sm4.encryptCustom_ECB(text, pwdKey);
}

/*
 * 解密工具函数
 * @param {String} text 待解密密文
 */
 export function decrypt(text) {
  return sm4.decryptCustom_ECB(text, pwdKey);
}

2.在登录文件中调用

// 引入到文件中
import { encrypt, decrypt } from '@/utils/sm4Util';

// 登录按钮
submitForm(formName) {
    this.loginFunction(formName);
},
// 登录
loginFunction(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            /*登录接口*/
            localStorage.clear();
            // if(this.loginLoading) return
            this.loginLoading = true;
            let b = "KBCDEFRT" + JSON.stringify(this.param) + 14725436;
            let data = {
                params: encrypt(b),
            };
            return new Promise((resolve) => {
                login(data)
                  .then((res) => {
                    this.loginLoading = false;
                    let dataJSON = decrypt(res.result);
                    let data = dataJSON.slice(8, dataJSON.length - 8);
                    let resultDate = JSON.parse(data);
                    if (
                        res.success &&
                        resultDate !== undefined &&
                        resultDate !== null
                    ) {
                        const userInfo = resultDate.userInfo;
                        localStorage.setItem("ACCESS_TOKEN", resultDate.token);
                        localStorage.setItem("token", resultDate.token);
                        localStorage.setItem("USER_NAME", {
                            username: userInfo.username,
                            realname: userInfo.realname,
                        });
                        this.$message.success("登录成功");
                        this.$router.push("/home");
                        resolve();
                    } else {
                        this.$message.error(res.message);
                        resolve();
                    }
                }).finally(() => {
                    resolve();
                });
            });
        } else {
            this.$message.error("请输入账号和密码");
            this.loginLoading = false;
            return false;
        }
    });
},

2. Vue实现加密传参，解密返回值

// 引入

import { encrypt, decrypt } from "@/utils/sm4Util";

// 项目点位点击后，项目基础信息 弹框查询
queryGetProjectBaseInfo(data) {
    // 加密
    let datas = "abcddcba" + JSON.stringify(data) + 12345678;
    let params = {
        params: encrypt(datas),
    };
    // 调用接口
    getProjectBaseInfo(params)
        .then((res) => {
        if (res.success && res.result !== undefined && res.result !== null) {
            // 解密
            let dataJSON = decrypt(res.result);
            let data = dataJSON.slice(8, dataJSON.length - 8);
            this.baseInfo = Object.keys(JSON.parse(data)).length > 0 ? JSON.parse(data) : {};
        } else {
            this.baseInfo = {};
        }
    }).finally(() => {});
},