在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js。

jsencrypt.js的github地址: https://github.com/travist/js...

使用yarn安装至Vue项目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

引入jsencrypt

import { JSEncrypt } from 'jsencrypt'

可封装为全局混合,便于调用

公钥为后端提供,如前端需要解密数据,则需要后端提供私钥。此处只封装了加密。

methods: {
 // 加密
 encryptedData(publicKey, data) {
  // 新建JSEncrypt对象
  let encryptor = new JSEncrypt();
  // 设置公钥
  encryptor.setPublicKey(publicKey);
  // 加密数据
  return encryptor.encrypt(data);
 }
 }

调用函数加密,此处的公钥是我从后端那获取的,然后加密密码

encryptedPassword = this.encryptedData(publicKey, password);

即完成加密。

更多使用可查阅官方文档 http://travistidwell.com/jsen...

PS:下面看下jsencrypt 配置对密码进行加密(vue)

安装

npm i node-jsencrypt

在script下导入

// 引入加密模块,对密码进行处理
const JSEncrypt = require('jsencrypt');

引用

一般情况下,后台会给一个获取公钥的接口来进行转换

methods: {
  init() {
   // 发送请求,获取公钥
   getKey().then(res => {
    this.gongKey = res.data.data; // 获取到公钥
    // 传入所请求回来的公钥,对密码进行处理
    // 实例化加密对象
    var crypt = new JSEncrypt.JSEncrypt({
     default_key_size: 1024
    });
    crypt.setPublicKey(this.gongKey);
    // 拿到加密明文
    let passWord = crypt.encrypt(obj.value);
   });
  }
 }

总结

以上所述是小编给大家介绍的在Vue项目中使用jsencrypt.js对数据进行加密传输的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

时间: 2019-04-16

Vue 页面状态保持页面间数据传输的一种方法(推荐)

如果大家觉得有用,更多的模块请 点击查看 vue router给我们提供了两种页面间传递参数的方式: 动态路由匹配 编程式的导航 // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 下面介绍一下 vue-viewplus 一个简化Vu

Vue.js教程之axios与网络传输的学习实践

前言 在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了.就学习尤大推荐的axios了.刚好本人对网络请求这块除了会get.put.post和delete这四个方法之外知之甚少,刚好补全上. 注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios. 为何放弃vue-resource? 尤大的原话: 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.super

Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

Vue.js中兄弟组件之间互相传值实例

兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

基于vue 兄弟组件之间事件触发(详解)

直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&

vue 解决兄弟组件、跨组件深层次的通信操作

兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是: 把兄弟组件内部的变量提升到一个中央仓库. 借助父级组件链式交互 使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件,这样的链式操作,在子组件不多的时候,但是一个不错的解决方法 子组件1 <template> <div> <p @click="$emit('fromFirst','来自A组件')">first组件&

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

vuejs使用$emit和$on进行组件之间的传值的示例

$emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了. 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发. 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现. 1.现在有两个组件,父组件contact_index.vue,子组件cust_tree.vue 2.点击父组件里面的选择

Vue 兄弟组件通信的方法(不使用Vuex)

项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

vue2.0s中eventBus实现兄弟组件通信的示例代码

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是

vue兄弟组件传递数据的实例

在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, data:{ eventHub:new Vue() // 在main.js设置所有组件都能用调用 }, }) 我们再组件一设置一个事件调用组件二的事件,传递数据给组件二 <template> <div v-on:click="on()&q