js实现加解密过程以及实际需求的应用

前言

前几天刚做了个需求，分享文件，其中可以进行加密分享，所谓的加密就是在复制分享链接的时候，后面带上 后端传过来的四位数随机密码，如下：

然后我们访问页面后，直接进行输入访问密码的操作，就是简单的加了个密

因为后端在设计接口的时候，后面查取分享数据的时候需要访问密码，那么我就在这 用户点击确定的时候，直接把密码拼在了url上，然后我们眼尖的pm觉得这样不好，想把密码不要明文显示，那么我也懒得再整其他的，直接给拼在url上的密码进行加解密得了

实现

首先我们要明确 此次对密码加密后，要确保能解密，然后我就使用了第三方插件：crypto-js

1.安装第三方插件

老规矩，我们先安装

npm i crypto-js

2.使用该插件，并对其进行封装

我写在了utils.js里

import CryptoJs from 'crypto-js' //引入

const key = CryptoJs.enc.Utf8.parse("1234123412ABCDEF") //设置十六位十六进制数作为密钥
const step = CryptoJs.enc.Utf8.parse("ABCDEF1234123412") //设置十六位十六进制数作为密 钥偏移量

//解密方法
export const DeCrypt = (text) => {
    let enCrytedStr = CryptoJs.enc.Hex.parse(text)
    let srcs = CryptoJs.enc.Base64.stringify(enCrytedStr)
    let deCrypt =  CryptoJs.AES.decrypt(srcs,key,{iv:step,mode:CryptoJs.mode.CBC,padding:CryptoJs.pad.Pkcs7})
    let deCryptedStr = deCrypt.toString(CryptoJs.enc.Utf8)
    return decryptedStr.toString()
}

//加密方法
export const EnCrypt = (text) => {
    let srcs = CryptoJs.enc.Utf8.parse(text)
    let encrypted = CryptoJs.AES.encrypt(srcs, key, { iv: step, mode: CryptoJs.mode.CBC, padding: CryptoJs.pad.Pkcs7 })
    return encrypted.ciphertext.toString().toUpperCase()
}

3.使用

import {  Decrypt ,EnCrypt} from "./utils";

let password = 'L0z6'
//加密
EnCrypt(password)

//解密
Decrypt(password)

最终效果

这样就实现了密码不是明文的需求啦