VUE前端常用加密处理des加密和解密

最新推荐文章于 2025-10-26 21:25:49 发布

原创最新推荐文章于 2025-10-26 21:25:49 发布 · 4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 同时被 3 个专栏收录

198 篇文章

订阅专栏

加密

4 篇文章

订阅专栏

des

1 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中使用crypto-js库进行DES加密和解密操作。示例代码展示了如何创建一个名为encryption.js的文件，其中包含加密和解密方法，并在Vue页面中调用这些方法进行数据的加密和解密。此外，还演示了如何在HTTP请求中直接使用加密方法来加密密码。

安装加解密插件crypto-js

新建一个js(encryption.js)用来放置加密解密的方法

import CryptoJS from 'crypto-js';
//DES加密
export const encryptBy = (message) => {
    var key = '12345678';
    function encryptByDES (message, key) {
      var keyHex = CryptoJS.enc.Utf8.parse(key)
      var option = {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}
      var encrypted = CryptoJS.DES.encrypt(message, keyHex, option)
      return encrypted.ciphertext.toString()
    }
    return encryptByDES(message, key);
}
//DES解密
export const decryptBy = (message) => {
    var key = '12345678';
    //DES  ECB模式解密
    function decryptByDES(message,key){
    var keyHex = CryptoJS.enc.Utf8.parse(key);
    var decrypted = CryptoJS.DES.decrypt({
    ciphertext: CryptoJS.enc.Hex.parse(message)
    }, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
    });
    var result_value = decrypted.toString(CryptoJS.enc.Utf8);
    return result_value;
    }
    return decryptByDES(message, key);
}

在页面中使用

在vue页面中引用

引入js

import {encryptBy,decryptBy} from '@/view/api/encryption';

加密解密

 console.log(encryptBy('123456'));//加密
 console.log(decryptBy('103e702e0737327c'));//解密

直接在请求接口里加密

import {encryptBy,decryptBy} from './function.js';
export function login (data) {
  return request({
  url: '/api/login?username=' + data.username + '&password=' + encryptBy(data.password)
  method: 'post'
  })
}