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

vue DES加密解密

发布时间:2018-09-05 18:44:24作者:wangjian浏览量:1289点赞量:0


    在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>

    现象

    image.png

0 +1