前端登陆加密解决方案

项目背景

环食药烟草的数据下载模块中，需要判断用户在进行数据下载时是进行了登录操作，如果没有登录要跳转登陆页面，输入账号和密码进行登录。

使用场景

项目中需要前端书写登录页面，用户输入账号密码，前端获取到用户输入的账号密码做登陆操作时需要采用对密码做加密处理。

解决方案

前端通过使用CryptoJS库进行加密处理。CryptoJS库是一种常用的前端加密库，支持多种加密方式，常用的加密方式有：

  1. AES：高级加密标准，目前最常用的对称加密算法之一。可以使用128位、192位或256位密钥进行加密
  2. DES：数据加密标准，一种较早的对称加密算法。可以使用56位密钥进行加密
  3. TripleDES：三重数据加密标准，基于DES算法的一个更安全的版本，可以使用112位或168位密钥进行加密
  4. MD5：消息摘要算法，一种单向哈希函数，常用于对密码进行加密和验证
  5. SHA：安全散列算法，类似于MD5，但更安全，可以使用不同的位数（如SHA-256、SHA-384、SHA-512）进行加密
  6. HMAC：基于哈希函数的消息认证码算法，用于验证数据完整性和真实性

使用指南

  • 使用 npm或者yarn 安装 crypto-js

    npm install crypto-js –save
yarn add crypto-js

  • 在 main.js 引入

    import CryptoJS from “crypto-js”;Vue.prototype.cryptoJS = CryptoJS;

  • 在 App.vue 使用

    export default {mounted() {console.log('this.cryptoJS', this.cryptoJS)}
}

    控制台打印内容如下：
    在这里插入图片描述

    说明安装成功，可以在项目中正常使用了~

    可以看出来 crypto-js 库的加密算法有很多。环食药烟草数据下载模块中采用的是 SHA256加密算法。SHA256 是一种单向加密算法，意味着对于给定的哈希值，无法通过解密算法直接还原出原始数据。SHA256 算法是不可逆的，这也是其安全性的基础之一，目前没有已知的有效方法可以快速破解它。

  • SHA256算法加密

    const password = 'hello world';
const res = this.cryptoJS.SHA256(password);
const plainRes = res.toString(); // 加密的结果
console.log('password 加密的结果是:', plainRes); //

  • 前后端判断逻辑

    1. 用户输入账号密码
    2. 前端对密码进行 SHA256 算法加密密码
    3. 后端将前端传入的已加密的密码存入数据库
    4. 用户再次登录时根据前端传入的已加密的密码与数据库中存入的密码进行比较，一致说明密码正确；否则错误

其他常用加密算法使用指南

  • AES加密

    // AES 加密
decrypt(word, key, iv) {let srcs = this.cryptoJS.enc.Utf8.parse(word);const AES_JM_RES = this.cryptoJS.AES.encrypt(srcs, key, {// 对称加密算法主要有AES、DES、3DES / 非对称加密算法主要有RSA、DSA、RCC// iv(初始变量)// key(加密密钥)// mode(加密模式 主要有CBC(默认)、CFB、CTR、OFB、ECB)// padding(填充方式 主要有Pkcs7(默认)、Iso97971、AnsiX923、Iso10126、ZeroPadding)iv: iv,mode: this.cryptoJS.mode.CBC, // 选择模式为CBCpadding: this.cryptoJS.pad.Pkcs7 // 选择填充方式为PKCS7});let encryptedBase64Data = this.cryptoJS.enc.Base64.stringify(AES_JM_RES.ciphertext);return encodeURIComponent(encryptedBase64Data);
}
// AES 解密
encrypt(word, key, iv) {word = decodeURIComponent(word);let encryptedHexStr = this.cryptoJS.enc.Base64.parse(word);let srcs = this.cryptoJS.enc.Base64.stringify(encryptedHexStr);let decrypt = this.cryptoJS.AES.decrypt(srcs, key,{iv: iv,mode: this.cryptoJS.mode.CBC,padding: this.cryptoJS.pad.Pkcs7,});let decryptedStr = decrypt.toString(this.cryptoJS.enc.Utf8);return decryptedStr.toString();
}// 样例
const password = 'hello world';
// 定义加密所需的参数
const key = this.cryptoJS.enc.Utf8.parse('1234567890abcdef'); // 设置密钥为16字节长度的十六进制字符串
const iv = this.cryptoJS.enc.Utf8.parse('abcdefghijklmnop'); // 初始化向量也必须是16字节长度的十六进制字符串
const str = this.decrypt(password, key, iv);
console.log('加密结果', str);
const str1 = this.encrypt(str, key, iv);
console.log('解密结果', str1);

  • DES加密

    const password = 'hello world';
const key = this.cryptoJS.enc.Utf8.parse('123456789');
const data = this.cryptoJS.enc.Utf8.parse(password);
// DES 加密
const encrypted = this.cryptoJS.DES.encrypt(data, key, {mode: this.cryptoJS.mode.ECB, // 选择模式为ECBpadding: this.cryptoJS.pad.Pkcs7 // 选择填充方式为PKCS7
});
console.log('DES 加密结果:', encrypted.toString()); // KNugLrX23UddguNoHIO7dw==
// DES 解密
const decrypted = this.cryptoJS.DES.decrypt(encrypted, key, {mode: this.cryptoJS.mode.ECB, // 选择模式为ECBpadding: this.cryptoJS.pad.Pkcs7 // 选择填充方式为PKCS7
});
console.log('DES 解密结果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world

  • MD5加密

    const password = 'hello world';
const md5Res = this.cryptoJS.MD5(password).toString();
console.log('password 加密的结果是:', md5Res); // 5eb63bbbe01eeed093cb22bb8f5acdc3

  • HMAC加密

    // 示例中采用HMAC-SHA256算法对数据进行加密
// HMAC并不是一个加密算法，它是一种用于消息认证的技术，因此并不能进行解密操作
const password = 'hello world';
const key = this.cryptoJS.enc.Utf8.parse('123456789');
// 计算 HMAC 
const hmac = this.cryptoJS.HmacSHA256(password, key);
console.log('HMAC加密结果:', hmac.toString()); // 9da40d794b56b945a8e382216b9778216326dd187f6b37e921ec28b63a09bdb0

  • TripleDES加密

    // 1. 在CryptoJS中，采用WordArray类型来传递数据,简单理解就是words是一个byte数组
// 2. WordArray的这个对象具有toString()方法，所以在js中是可以直接隐式转换成字符串的，**但是默认是Hex编码（16进制)**
// 3. 对称解密使用的算法是 `AES-128-CBC`算法，数据采用 `PKCS#7` 填充 ， 因此这里的 `key` 需要为16位！const password = 'hello world';
// 16位十六进制数作为密钥和密钥偏移量
const key = this.cryptoJS.enc.Utf8.parse('0123456789abcdef'); // 密钥
const data = this.cryptoJS.enc.Utf8.parse(password);
// 定义向量（可选参数，如果不指定则会自动生成）
const iv = this.cryptoJS.enc.Utf8.parse('abcdefghijklmnop'); // 偏移量
// TripleDES 加密
const encrypted = this.cryptoJS.TripleDES.encrypt(data, key, {iv: iv,mode: this.cryptoJS.mode.CBC, // 选择模式为CBCpadding: this.cryptoJS.pad.Pkcs7 // 选择填充方式为PKCS7
});
console.log('TripleDES 加密结果是:', encrypted.toString()); // sEdwNwrfNcMrMj11iMjKdA==
const decrypted = this.cryptoJS.TripleDES.decrypt(encrypted, key, {iv: iv,mode: this.cryptoJS.mode.CBC, // 选择模式为CBCpadding: this.cryptoJS.pad.Pkcs7 // 选择填充方式为PKCS7
});
console.log('TripleDES 解密结果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world

  • Base64加密
    Base64顾名思义，就是基于64个可打印字符来表示二进制数据的一种方法，「注意它并不是一种加密算法」。对于64个打印字符，我们只需要6个二进制位就可以完全表示了。那么我们如何利用8个二进制位来表示只需要6个二进制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我们可以将每6个位元为一个单元，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示。

    // 原生加密
const btoa = window.btoa('hello, world')  // 编码
console.log('加密后',btoa) // aGVsbG8sIHdvcmxk
const atob = window.atob('aGVsbG8sIHdvcmxk')  // 解码
console.log('解密后',atob) // hello, world// base64插件
npm install --save js-base64 // 安装// 使用
import { Base64 } from 'js-base64';const encode = Base64.encode('hello, my name is FuChaoyang'); // 编码
console.log('插件加密后', encode);
const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解码
console.log('插件解密后', decode);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/251638.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式学习第十六天！（Linux文件查看、查找命令、标准IO）

嵌入式学习第十六天！（Linux文件查看、查找命令、标准IO）

Linux软件编程 1. Linux： 操作系统的内核： 1. 管理CPU 2. 管理内存 3. 管理硬件设备 4. 管理文件系统 5. 任务调度 2. Shell： 1. 保护Linux内核（用户和Linux内核不直接操作，通过操作Shell，Shell和内核交互…
阅读更多...
return语句

return语句

一、return语句 使用在方法时，表示跳出所在方法使用在main方法时，表示退出程序 二、break、continue、return三者的比较 break语句：跳出循环continue语：结束当次循环，继续下一次循环return语句：使用在方法时…
阅读更多...
impala与kudu进行集成

impala与kudu进行集成

文章目录 概要Kudu与Impala整合配置Impala内部表Impala外部表Impala sql操作kuduImpala jdbc操作表如果使用了Hadoop 使用了Kerberos认证，可使用如下方式进行连接。 概要 Impala是一个开源的高效率的SQL查询引擎，用于查询存储在Hadoop分布式文件系统&am…
阅读更多...
Android学习之路(28) 进程保活组件的封装

Android学习之路(28) 进程保活组件的封装

前言 远古时代，出现过很多黑科技，比如MarsDaemon，使用双进程守护的方式进行保活，在当时可谓风光无限，可惜在8.0时代到来就被废弃了。 又比如后面出现的1像素Activity的保活方式，说他流氓一点不过分&#…
阅读更多...
自动运维ansible实训（网络管理与维护综合实训）

自动运维ansible实训（网络管理与维护综合实训）

来自即将退役学长的分享，祝学弟学妹以后发大财！ 一 实训目的及意义 1.1 实训目的 1、熟悉自动化运维工具：实训旨在让学员熟悉 Ansible 这一自动化运维工具。通过实际操作，学员可以了解 Ansible 的基本概念、工作原理和使用方法…
阅读更多...
【数据结构】排序---C语言版

【数据结构】排序---C语言版

七大排序算法 一、对于排序的分类：二、插入排序1、直接插入排序（1）基本思想：（2）直接插入排序：（3）代码实现：（4）总结： 2、希…
阅读更多...
BAPI创建会计凭证和冲销凭证

BAPI创建会计凭证和冲销凭证

目录 BAPI创建会计凭证和冲销凭证组件 利润中心冲销不可能原因由于一个变量为空导致不可以冲销 代码附上创建会计凭证代码冲销会计凭证代码 BAPI创建会计凭证和冲销凭证 在使用冲销会计凭证的BAPI，即BAPI_ACC_DOCUMENT_REV_POST时，遇到下面的问题&#…
阅读更多...
Vue（二十）：ElementUI 扩展实现表格组件的拖拽行

Vue（二十）：ElementUI 扩展实现表格组件的拖拽行

效果 源码 注意&#xff1a; 表格组件必须添加 row-key 属性&#xff0c;用来优化表格的渲染 <template><el-row :gutter"10"><el-col :span"12"><el-card class"card"><el-scrollbar><span>注意: 表格组件…
阅读更多...
【数据库】关系型和非关系型数据库的区别？

【数据库】关系型和非关系型数据库的区别？

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 关系型数据库的优点 非关系型数据库&#xff08;NOSQL&#xff09;的优点 我的其他博客 正文 关系型数据库的优点 容易理解&#xff0c…
阅读更多...
Python 数据可视化：配色方案

Python 数据可视化：配色方案

1、引言 在这篇文章中&#xff0c;我们将研究Python的一些配色方案&#xff0c;主要是Seaborn库。这将采用 Python Notebook 格式&#xff0c;其中包括绘图的代码。 2、实验数据 首先导入必要的库&#xff1a; import pandas as pd import seaborn as sns import matplotlib…
阅读更多...
基于springboot篮球竞赛预约平台源码和论文

基于springboot篮球竞赛预约平台源码和论文

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;篮球竞赛预约平台也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而…
阅读更多...
虚幻UE 特效-Niagara特效实战-魔法阵

虚幻UE 特效-Niagara特效实战-魔法阵

回顾Niagara特效基础知识&#xff1a;虚幻UE 特效-Niagara特效初识 其他四篇实战&#xff1a;UE 特效-Niagara特效实战-烟雾、喷泉、 虚幻UE 特效-Niagara特效实战-火焰、烛火、 虚幻UE 特效-Niagara特效实战-雨天、 虚幻UE 特效-Niagara特效实战-眩晕。 本篇笔记记录了使用空模…
阅读更多...
Matplotlib热力图的创意绘制指南【第54篇—python：Matplotlib热力图】

Matplotlib热力图的创意绘制指南【第54篇—python：Matplotlib热力图】

文章目录 Matplotlib热力图的创意绘制指南1. 简介2. 基本热力图3. 自定义颜色映射4. 添加注释5. 不同形状的热力图6. 分块热力图7. 多子图热力图8. 3D热力图9. 高级颜色映射与颜色栏设置10. 热力图的动态展示11. 热力图的交互性12. 标准化数据范围13. 导出热力图 总结&#xff…
阅读更多...
动态颗粒背景，适合VUE、HTML前端显示

动态颗粒背景，适合VUE、HTML前端显示

动态颗粒背景&#xff0c;适合做背景使用&#xff0c;VUE、HTML前端显示直接看效果 废话不多说直接上代码&#xff1b; 一、html 代码部分 <template><div id"login"><div class"container"><div class"login-form"&g…
阅读更多...
C++实战Opencv第二天——色彩空间转换函数和opencv中图像对象创建与赋值（从零开始，保姆教学）

C++实战Opencv第二天——色彩空间转换函数和opencv中图像对象创建与赋值（从零开始，保姆教学）

OpenCV是一个强大的计算机视觉库&#xff0c;使用C作为主要编程语言&#xff0c;对于图像处理和计算机视觉领域具有重要意义。其提供了丰富的功能和算法&#xff0c;使得开发者能够快速实现各种图像处理和计算机视觉应用。OpenCV C为图像处理和计算机视觉领域的开发者提供了一个…
阅读更多...
[Vue3]父子组件相互传值数据同步

[Vue3]父子组件相互传值数据同步

简介 vue3中使用setup语法糖&#xff0c;父子组件之间相互传递数据及数据同步问题 文章目录 简介父传子props传递值 使用v-bind绑定props需要计算toRefcomputed emit传递方法 使用v-on绑定 子传父expose v-model总结 父传子 props传递值 使用v-bind绑定 父组件通过props给子…
阅读更多...
【前沿技术杂谈：开源软件】引领技术创新与商业模式的革命

【前沿技术杂谈：开源软件】引领技术创新与商业模式的革命

【前沿技术杂谈&#xff1a;开源软件】引领技术创新与商业模式的革命 开源软件如何推动技术创新开源软件的开放性和协作精神促进知识共享和技术迭代推动关键技术的发展开源软件与新技术的融合 开源软件的商业模式开源软件的商业模式将开源软件与商业软件相结合 开源软件的安全风…
阅读更多...
三维可视化助力船舶制造：大数据处理、实时协作更高效！

三维可视化助力船舶制造：大数据处理、实时协作更高效！

随着科技的不断发展&#xff0c;船舶制造行业也在不断寻求创新和提高效率的途径。其中&#xff0c;HOOPS技术作为一种先进的三维可视化和工程协作技术&#xff0c;正逐渐成为船舶制造领域的关键工具。 本文将深入探讨HOOPS技术在船舶制造行业的应用&#xff0c;探讨其带来的优…
阅读更多...
张维迎《博弈与社会》威胁与承诺（4）宪政与民主

张维迎《博弈与社会》威胁与承诺（4）宪政与民主

有限政府 动态博弈理论对我们理解民主与法治具有重要的意义。 自人类进入文明时代以来&#xff0c;政府就是社会博弈重要的参与人。任何社会要有效运行&#xff0c;都需要赋予政府一些自由裁量权。但如果政府的自由裁量权太大&#xff0c;政府官员为所欲为&#xff0c;不仅老百…
阅读更多...
Python详细教程

Python详细教程

一、Python简历 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&#xff0c;相比其他语言经常使用英文关键字&#xff0c;其他语言的一些标点符号&#xff0c;它具有比其他语言更有特色语法结构。 Python 是一种解…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023