Vue项目中的前端加密详解

最新推荐文章于 2024-05-09 07:18:23 发布
最新推荐文章于 2024-05-09 07:18:23 发布
阅读量1.9w 收藏 32
点赞数 2
分类专栏： Vue 前后端分离 文章标签： sha256 RSA 前端加密 Vue 前后端分离
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/localhost_1314/article/details/88557626
版权

在项目中我们常用到的两种加密方式：

  1. sha 256加密
  2. RSA加密

在项目中的使用方法总结如下:

一、 sha256加密

  1. npm安装sha256库

  1.  安装完成

3.可以去项目配置文件中package.json中查看

4.在模块中使用,引入sha256库,对需要加密的字符进行加密传输

二、 RSA加密

  1. npm安装RSA库

2.安装完成

3. 可以去项目配置文件中package.json中查看

4. import jsencrypt到项目中来

5.使用公钥加密

(1)定义

(2)获取公钥

(3)实例化一个JSEncrypt对象

(4) RSA加密传输完成

 

小天使娜娜
关注
  • 2
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue姓名动态输入三种方式、前端密码加密
我是张先生
03-02 4252
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcss...
springboot+vue前后分离项目
11-27
《SpringBoot+Vue前后分离项目详解》 在现代Web开发中，前后端分离已经成为主流模式，它能够提高开发效率，优化用户体验。本项目基于SpringBoot和Vue.js实现了这样一个前后分离的系统，用户权限管理则采用了Shiro...
前端vue使用SM4国密加密解密
weixin_57031986的博客
02-22 1888
前端vue使用SM4国密加密解密
vue常用6种数据加密方式的使用
一步一个脚印，踏实努力，向着目标前进
03-13 2802
在Vue.js项目中，你可能需要执行数据加密以确保敏感信息的安全。虽然Vue.js本身不提供数据加密功能，但你可以使用JavaScript库来实现这一目标。
Web前端最新在VUE中使用RSA加密解密加签解签，零基础前端开发
最新发布
2401_84619145的博客
05-09 725
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。
vue前端加密
qq_42330926的博客
07-13 1136
vue前端加密
vue前端加密方法md5/crypto-js
不确定因素的博客
04-08 3036
为什么前端加密 密码或者其他比较重要东西假如使用明文，出现传输中被窃听是很危险的行为，所以就需要前端一些加密协议，对密码、手机号、身份证号或着去其他重要的信息进行保护； 前端的加密方式 前端的加密方式有很多，目前我使用的有md5、crypto-js以及JWT，这篇文章目前只讲md5、crypto-js方式。 MD5加密 安装：cnpm i --save js-md5 在main.js文件中将md5转换成vue原型： //main中引入 import md5 from 'js-md5'; Vue.protot
vue配置加密_RSA前端加密（vue项目）
weixin_39771260的博客
12-19 395
1，安装插件npm install jsencrypt --save2，安装成功之后，在main.js文件引入import JSEncrypt from 'jsencrypt';//引入模块Vue.prototype.$jsEncrypt = JSEncrypt;//配置全局变量3，在需要使用的组件(本文以登录页面对账号和密码进行了加密)getPublicKey({}).then((res)=&g...
前端vue加密方式MD5,SHA256等
你还有我
12-14 3070
在线HASH加密工具 在线加密超链接 MD5加密细节 vue中MD5加密超链接 SHA256加密细节 SHA256加密链接
前端项目-ticketbase-js.zip
09-03
《Ticketbase-js前端项目详解》 Ticketbase-js前端项目是一个专为集成Ticketbase表单到网站中的解决方案。这个项目的核心目标是提供一个简洁且高效的方法，使得开发者能够轻松地将Ticketbase的购票功能嵌入到自己的...
2023最新前端面试宝典
09-10
【前端面试知识点详解】 在2023年的前端面试中，掌握计算机网络、HTML、CSS、JavaScript以及Vue等核心技术是至关重要的。以下是这些知识点的详细分析： 1. **计算机网络 - HTTP与HTTPS** - **HTTP**：超文本传输...
vue接口请求加密实例
10-14
主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端面试，独有前端面试题详解，前端面试刷题必备
10-09
"前端面试，独有前端面试题详解，前端面试刷题必备"这个资源涵盖了前端面试的诸多关键知识点，包括HTML、CSS、JavaScript、Vue、React、Node.js、TypeScript、Webpack、算法、网络与安全以及浏览器的工作原理等方面...
Springboot+vue的疫情打卡管理系统 Javaee项目，springboot vue前后端分离项目
04-14
本项目——"SpringBoot+Vue的疫情打卡管理系统"正是这样一个结合JavaEE框架和前端Vue.js技术的优秀实践，旨在提供一套高效、便捷的疫情信息收集与处理解决方案。 一、SpringBoot框架详解 SpringBoot是Spring框架的...
vue - 密码加密
asfcyg的博客
11-21 4655
第一步：在终端npm install jsencrypt安装 安装后查看node_modules，确认已经安装好了 第二步：在utils文件夹中新建文件rsaEncrypt.js import JSEncrypt from 'jsencrypt/bin/jsencrypt' // 可以在这个网站生成私钥和公钥 // 密钥对生成 http://web.chacuo.net/netrsakeypair // 这个网站生成的公钥，项目暂时使用这个公钥 const publicKey = '' // smp
VUE项目涉及的几种加密
DuBanL的博客
06-20 3184
一、VUE项目涉及的几种加密 1.打包之后的配置文件加密 使用jjencode加密，复制源码加密完后粘贴过去即可 https://www.sojson.com/jjencode.html 2.RSA加密 npm install jsencrypt --save 安装jsencrypt 在main.js中引入 使用 ...
vue数据加密/解密
孤傲的博客
06-14 4931
使用crypto-js来进行加密和解密
在vue中 加密总结
zou__qi的博客
06-05 330
//npminstallcrypto--save importcryptofrom'crypto' //npminstalljs-sha256 //letsha256=require("js-sha256").sha256 //npminstalljs-base64 //letBase64=require("js-base64").Base64 exportdefault{ md5Fun(data){ constmd5=...
vue前端密码加密，后端密码解密
weixin_45448129的博客
03-23 9048
一、前端VUE： 1、安装 npm install crypto-js 2、创建工具类（src/utils/asc.js） import CryptoJS from 'crypto-js' // 需要和后端一致 const KEY = CryptoJS.enc.Utf8.parse('1234567890123456'); const IV = CryptoJS.enc.Utf8.parse('1234567890123456'); export default { /** * 加密
vue项目中前端怎么调用后端接口
05-31
在Vue项目中，可以使用axios库向后端发送HTTP请求来调用后端接口。以下是一个简单示例： 首先，需要在Vue项目中安装axios库： ``` npm install axios ``` 然后，在需要调用后端接口的组件中，可以使用如下代码： ```javascript import axios from 'axios'; export default { data() { return { users: [] } }, mounted() { axios.get('/api/users') // 发送GET请求到后端接口 .then(response => { this.users = response.data; // 处理返回结果 }) .catch(error => { console.log(error); }); } } ``` 在上面的代码中，我们使用了axios库的get方法向后端发送了一个GET请求，并将返回结果保存到了组件的data中的users数组中。 需要注意的是，这里的`/api/users`是一个示例后端接口的URL，具体的URL需要根据后端接口的实际情况进行修改。另外，在开发环境下，如果前端和后端运行在不同的端口上，可能需要在Vue项目的`config/index.js`文件中进行一些配置，以允许跨域请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值