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

安裝加解密插件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'
  })
}