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)

            })

以上。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容