新手上路----->：
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)
})
以上。
网友评论