您现在的位置是：网站首页>>前端技术>>Vue

在vue中使用DES加密解密需要使用crypto-js插件

cnpm install crypto-js（npm install crypto-js）

des加密解密方法

//DES加密
    encryptByDES(message, key){
            var keyHex = CryptoJS.enc.Utf8.parse(key);
            var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
             });
            return encrypted.ciphertext.toString();
    },
    //DES  ECB模式解密
    decryptByDES(ciphertext,key){
    var keyHex = CryptoJS.enc.Utf8.parse(key);
    var decrypted = CryptoJS.DES.decrypt({
    ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
    }, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
    });
    var result_value = decrypted.toString(CryptoJS.enc.Utf8);
    return result_value;
    }

使用

let message = '123456';//加密数据
let key = '12345678';
 //加密
let des = this.encryptByDES(token,key);
console.log(des);
//解密
console.log(this.decryptByDES(des,key));




在config文件下新建一个function.js文件专门放入vue的一些公用方法，将DES的加密解密方法放进去

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中调用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="click1" type="">点击</button>
  </div>
</template>
<script>
import {encryptBy,decryptBy} from '../../config/function';
export default {
  name: 'Home',
  data () {
    return {
      msg: '加密解密'
    }
  },
  methods:{
    click1(){
        let message = '123456';//加密数据
        let key = '12345678';
        //加密
        console.log(encryptBy('123456'));
        console.log(decryptBy('103e702e0737327c'));
        
       
    },
    
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

现象