浅谈前端加解密

·  阅读 43

「这是我参与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

实现思路:

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

加解密文件代码:


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进行解码操作

分类:
前端
标签: