浅谈前端加解密

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

前端加密方式:

1、base64格式:

通过window.atob() 与window.btoa()实现对base64格式的数据进行解码和编码，兼容性是主流浏览器，要IE10及以上

2、MD5加密: MD5.js是通过前端js加密的方式对用户信息，密码等私密信息进行加密处理的工具，可以引入相关插件,对要加密的内容直接加密

3、AES/DES加密解密

安装crypto-js.js,配置加密解密工具类，引入文件，进行加密解密

4、RSA公钥私钥:

(1)引入相关配置文件js/jsencrypt.js

(2)可以在前端在向后端发起登录请求之前，先请求后台，然后获取公钥方法，通过公钥对用户名和密码加密

(3)用加密后的用户名密码请求后端

5、sha1加密

sha1加密是一种不可逆的加密方式

引入配置文件sha1.js，直接加密

前言:

最近公司的项目传值时需要加密来保护用户隐私，因此前端需要配合解密进行一系列操作，用的加密方式为AES

实现思路:

安装crypto-js,npm i crypto-js --save
新建一个加密解密文件，引入crypto-js，同时编写加密，解密工具类
引入编写的加密解密文件, import xxx from '@xxx'
通过加密，解密方法进行操作

加解密文件代码:


import CryptoJS from 'crypto-js'

export default{
    encryptWord(word, keyStr) {
        keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var srcs = CryptoJS.enc.Utf8.parse(word);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
        return encrypted.toString();
    },
    // 解密
    decryptWord(word, keyStr) {
        keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    }
}

加密解密方法:

crypto是新建的一个加密,解密文件名

解密方法:
crypto.decryptWord(decodeURIComponent(this.$route.query.telPhone))

加密方法:
crypto.encryptWord(this.$route.query.telPhone)

注意:

因为解密的这个参数是从路由url中拿到的,开始几次总是取错值，原因是取值时造成了编码参数错误，需要后端encode加密一下，通过decodeURIComponent进行解码操作