前端AES加密

在这里插入图片描述
1、创建crypto.js文件

import CryptoJS from 'crypto-js';

const AESKEY = 'abcdfghigklmnopq';
// 16位密钥,和后端保持一致

const encrypt = (text) => {
    let key = CryptoJS.enc.Utf8.parse(AESKEY);

    let encrypted = CryptoJS.AES.encrypt(text, key, {
        drop: 128,
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });

    return encrypted.toString();
};
// AES加密
export default encrypt;

2、在需要的文件夹上引入

// AES加密
import encrypt from '@/util/crypto'

// Post传参,登录请求
let params = new FormData()
      params.append('userName', this.username)
      params.append('passWord', encrypt(this.password))
      this.axios.post(api.loginUrl, params).then(response =>{
        let res = response.data
        if (res.success) {
          localStorage.setItem('login', true)
          localStorage.setItem('wsp_Auth', res.data.token)
          localStorage.setItem('wsp_user', JSON.stringify(res.data.user))
          this.$router.push({
            path: '/index'
          })
        } else {
          this.$message.error(res.message || '系统问题,请联系管理员!')
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.loading.close()
      })

完事,证实一下我们的账号密码都是admin

在这里插入图片描述

前端AES加密是一种常见的加密方式,可用于保护用户数据的安全性。然而,避免恶意第三方获取加密密钥是一项重要的任务。在前端开发中,隐藏加密密钥是非常有必要的,但是并不是一件容易的事情。下面是关于前端AES加密如何隐藏key的一些方法: 1.前端混淆 前端混淆是一种通过随机改变代码格式和命名规则来混淆、干扰黑客的翻译工作的技术。尽管前端混淆不能完全隐藏密钥,但它可以加强加密密钥的保密性。 2.后端加密 将加密密钥存储在后端服务器上,然后通过HTTPS协议将加密密钥传输到前端。这种方法保证了加密密钥的安全性,但服务器依然是一个数据的商家中心、是网络攻击的目标,如果服务器架构等漏洞被攻击或者IP被人肉搜索,就会导致服务器的信息泄漏甚至被入侵。 3.动态生成密钥 动态生成密钥是一种更加高级的加密技术方法,将AES密钥动态生成并且存储在变量中,该变量只在一次性使用身后立即销毁。加密操作采用动态密钥,用完即弃,这样可以避免密钥泄漏,保证数据的安全性。 推荐采用动态生成密钥的方法,既可以保证加密数据的安全,又可以有效的防止密钥泄露。密钥的安全性直接决定了加密数据的安全性,因此必须采用可靠的加密方法来密切保护密钥。同时,开发人员也应该深入学习加密技术知识,提高对前端AES加密的深入理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值