首页 > 其他分享 >前端vue使用jsencrypt进行RAS加密/解密

前端vue使用jsencrypt进行RAS加密/解密

时间:2023-04-25 09:47:12浏览次数:45  
标签:vue encrypt encryptor 解密 jsencrypt RAS 加密 JSEncrypt

前端

安装:

npm install jencrypt --sava

在utils下创建jsencrypt.js文件,内容如下:

import JSEncrypt from "jsencrypt/bin/jsencrypt.min";

/** RSA秘钥对生成网站 http://web.chacuo.net/netrsakeypair */

/** 公钥 512位*/
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALT1/hKNtGYtWqEk7N6SIY/UHh8BgW7Y\n'+
'w/639KsJfWwGqMBRQwFmQxvwGRMhvCipQvASsnRxKGWtOwNta+mGZL0CAwEAAQ==';
/** 私钥 */
const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAtPX+Eo20Zi1aoSTs\n'+
'3pIhj9QeHwGBbtjD/rf0qwl9bAaowFFDAWZDG/AZEyG8KKlC8BKydHEoZa07A21r\n'+
'6YZkvQIDAQABAkAJzstWdhew8gRXd4jfB0yKXxTC2XIKb/UveQjpvDnwANTzY8NZ\n'+
'w5qFvScPsUIuaZQb6RaLT+dMYGKpMv0g7/iBAiEA7Umx7fox9LrlZzdO4kl4e1sB\n'+
'Ll5j357eYARedc9RP4MCIQDDOy79kRTcslzMm8zzQ9IKEc+b/DfDR2hLUIZu5oZW\n'+
'vwIgBjWefV7FveTCKhBNdSh9CaVZA5CexnRO125l1mllc+cCIDfjVGNgSfGX2br1\n'+
'CunEy3b4fE8yF6B+a5vL1IAg2+ovAiB0OfcxaiJDQEBvVrf6B9dyuallXykg9RQp\n'+
'6S/BXvDLlg==';

/** 加密 */
export function encrypt(txt) {
  /** 创建JSEncrypt对象 */
  const encryptor = new JSEncrypt();
  /** 设置公钥 */
  encryptor.setPublicKey(publicKey);
  /** 数据加密 */
  return encryptor.encrypt(txt);
}

/** 解密 */
export function decrypt(txt) {
  /** 创建JSEncrypt对象 */
  const encryptor = new JSEncrypt();
  /** 设置私钥 */
  encryptor.setPublicKey(privateKey);
  /** 数据解密 */
  return encryptor.encrypt(txt);
}

页面使用,在需要的页面引入jsencrypt.js

import { encrypt, decrypt } from "@/utils/jsencrypt";
/** 加密密码**/
password: encrypt(this.password);
/** 解密密码**/
password: decrypt(this.password);

 

标签:vue,encrypt,encryptor,解密,jsencrypt,RAS,加密,JSEncrypt
From: https://www.cnblogs.com/brucewang92/p/17337761.html

相关文章

  • Vuex
    Vuex概念在Vue中实现集中式状态(数据)管理的一个Vue的插件,对Vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间的通信。使用场景多个组件需要共享数据时。搭建Vuex环境ps:vue2只能使用Vuex3,Vue3只能使用Vue41.创建文件:src/sto......
  • vue项目中引入echarts中国地图
     最近项目中根据项目需求,展示中国地图一、下载echarts插件(我这里使用的是 4.9.0 版本)[email protected]二、在需要使用的页面引入echarts(这里是单独封装了地图组件) components/map.vue<template><divclass="map-view"><divid="main"></d......
  • vue2源码-十四、computed和watch的区别
    computed和watch的区别computed和watch的相同点。底层都会创建一个watcher(用法的区别:computed定义的属性可以在模板中使用,watch不能在视图中使用)computed默认不会执行只有取值的时候才会执行内部会维护一个dirty属性,来控制依赖的值是否发生变化。默认计算属性需要同......
  • vue关于请求消息没问题但是还是进入catch块(已解决)
    第一次使用vue中的拦截器,一开始是在拦截器的逻辑代码上有问题(也有可能没问题),然后请求和响应都是没问题的,但是请求之后就是不跳转,然后发现是设置了拦截器的问题,折磨了下拦截器保证了代码能够顺利运行到resolve,但是发现即便是resolve后回到原本的代码中,代码还是运行到catch块中去。......
  • Vue关于beforeRouteEnter以及beforeRouteLeave函数的运用
    先上代码beforeRouteEnter:(to,from,next)=>{console.log("进入路由之前")next(vm=>{vm.getData();});},beforeRouteLeave:(to,from,next)=>{console.log("进入路由之后")next();},methods:{getData:f......
  • vue3+jointjs demo
    下面是使用Vue3和JointJS添加元素的示例代码:1.安装JointJS```terminalnpminstalljointjs--save```2.创建JointJS图形```javascriptimport{ref,onMounted}from'vue';import*asjointfrom'jointjs';exportdefault{setup(){constgraphC......
  • vue全屏
    <template><div><imgsrc="../assets/fangda.png"@click="toggleFullscreen"/></div></template><script>exportdefault{methods:{toggleFullscreen(){if(document.fullscree......
  • Vue2和ElementUI编写的无限级菜单路由
    Vue2和ElementUI编写的无限级菜单路由文章转载自:www.javaman.cn<template><div><el-menu:default-active="$route.path"class="el-menu-vertical-demo":collapse="isCollapse"router><templatev-for="item......
  • Vue3 Vue3中其他的改变
    视频六、其他1.全局API的转移Vue2.x有许多全局API和配置。例如:注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton',{data:()=>({count:0}),template:'<button@click="count++">Clicked{{count}}times.</button>......
  • Vue.js 目录
    Vue.js大致介绍Vue官网Vue.js搭建Vue开发环境(p4~p6)Vue.js模板语法Vue.js数据绑定Vue.jsel与data的两种写法Vue.js理解MVVMVue.js数据代理-回顾Object.defineProperty方法&数据代理理解Vue.js事件处理-事件的基本使用v-on传参Vue.js事件处理-事件修饰符Vue.js事......