vue+axios使用RSA传参加密

新手上路----->:

vue+axios项目,之前使用md5加密,后改使用RSA传参加密,RSA 加密依赖有多种,这里使用jsencrypt 。

ps:rsa加密公钥私钥由后台生成后,只提供给给前台公钥即可。

1、npm install --save jsencrypt

2、引入两个js文件,我在src下新建了一个plugins文件,在里面引入jsencryptKey,js和jssHttp.js


3、jsencryptKey,js下:

import Vue from 'vue'

import JsEncrypt from 'jsencrypt'

//RSA加密

export const  $encruption = function (key,obj) {

    let encrypt = new JsEncrypt();

    encrypt.setPublicKey(

        //KEY RSA公钥

        key

    );

    return encrypt.encrypt(obj);

};

//RSA解密

export const $decryption = function (key,obj) {

    let _decryp = new JsEncrypt();

    _decryp.setPrivateKey(

        //KEY RSA私钥

        key

    );

    return _decryp.decrypt(obj)

};

4、jssHttp.js下引入jsencryptKey中定义的加密方法$encruption,封装请求,RSA加密有长度限制,需分段加密

import Vue from 'vue';

import axios from 'axios';

import {$encruption,$decryption} from '../plugins/jsencryptKey'

let publicKey = '*****'; //后台提供的公钥

/**

* 封装get方法

* @param url

* @param data

* @returns {Promise}

*/

export function get(url,params){

    return new Promise((resolve,reject) => {

        axios.get(url,{

            params: params

        })

        .then(response => {

            resolve(response.data);

        })

        .catch(err => {

            reject(err)

        })

    })

}

/**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

export function post(url,data){


    let paramsData = '';  //加密后的参数

    let paramsString = ''; //把传过来的data数据转成字符串

    let params1 = '';      //把paramsString每三十个字符截取一次赋值给params1

    let params2 = '';      //把params1循环加密赋值给params2

    if(data){

        paramsString = JSON.stringify(data);

    }

    //RSA加密是有长度限制,由于存在参数超长的情况,所以这里进行分段加密处理

    if(paramsString.length > 30){

        params1 = paramsString.match(/.{1,30}/g);

        params1.forEach(function(d){

            let params3 = $encruption(publicKey,d);

            params2 += params3;

        })

        paramsData = params2;

    }else {

        if(data){

            paramsData = "{\"request\":" + $encruption(publicKey,JSON.stringify(data)) + "}"

        } 

    }


    //可以在这打印加密后的数据和解密后的数据,需后台提供私钥

    // console.log($encruption(publicKey,JSON.stringify(data)))

    // console.log($decryption(privateKey,$encruption(publicKey,JSON.stringify(data))))

    return new Promise((resolve,reject) => {

        axios.post(url,paramsData)

        .then(response => {

            resolve(response);

        },err => {

            reject(err)

        })

    })

}

5、在main.js中引入

        import JsEncrypt from 'jsencrypt'

        import {post} from './plugins/jssHttp'

        Vue.prototype.$jsEncrypt = JsEncrypt

        Vue.prototype.$post = post;

6、在组件中可直接使用,传参方式为键值对方式
            let params = { 'name': abc, 'age': 20, 'sex': '女'}

            this.$post('url',params)

            .then(res => {

               console.log(res)

            })

            .catch(err => {

                console.log(err)

            })

以上。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,924评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,781评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,813评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,264评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,273评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,383评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,800评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,482评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,673评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,240评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,802评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2 341

推荐阅读更多精彩内容

  • 准备工作 vue-cli 创建一个新项目 vue-cli axios中文说明文档 1.安装axios npm in...
    赵伟敏_19阅读 1,994评论 0 16
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,521评论 0 6
  • vue笔记 一.vue实例 vue的生命周期 beforeCreate(创建前), created(创建后), b...
    秋殇1002阅读 1,044评论 0 1
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,061评论 0 2
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,754评论 4 45