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

写在最前边，千万要注意，用此插件加密时，只能是字符串类型，如果是number，加密出来是空！！！血的教训，这个bug我找了大半天才发现

安装jsencrypt

npm install jsencrypt --dep

第一种方法
在 axios封装js里 设置
api => index.js

import { JSEncrypt } from 'jsencrypt'

const Encrypt = new JSEncrypt ();
//加密
//加密一个参数
const doEncrypt = (key) =>{//请求公钥接口获取公钥
	return $http.get('/getPublickey').then(res=>{
			let publicKey = res.data.publicKey
			Encrypt .setPublicKey(publicKey );
			return Encrypt.encrypt(key)
	})
}

//加密两个参数时
const doEncryptTwo = (key) =>{//请求公钥接口获取公钥
	return $http.get('/getPublickey').then(res=>{
			let publicKey = res.data.publicKey
			Encrypt .setPublicKey(publicKey );


		let keyArr;
		
		keyArr = {phoneNum:Encrypt.encrypt(key.phoneNum),password:Encrypt.encrypt(key.password)}


			return Encrypt.encrypt(keyArr )
	})
}

export default{
	login:async (data)=>{//只加密一个参数
		data.password = await doEncrypt (data.password);
		return $http.post('/login',data)
	},
	register:(data) = >{//加密两个参数
		let c= {
			phoneNum:data.phoneNum,
			password:data.password
		}
		data = await doEncryptTwo(c)
		return axios.post('/register',data)
	}
}

组件内使用时

login(){
	let data = {
		phoneNum:this.loginForm.phoneNum,
		password:this.loginForm.password
	}
	this.$Api.login(data).then(res=>{
		console.log(res)
	})
}

第二种方法 不封装直接写在组件里

main.js
引入

import { JSEncrypt } from 'jsencrypt'

组件里 header.vue

loginFun(){
		//实例化JSEncrypt 
		let jse = new this,$jsEncrypt;
		//请求公钥接口
		this.$Api.publicKey().then(res=>{
			if(res.code == 200){
					//设置公钥
					jse.setPublicKey('------BEGIN PUBLIC KEY-----'+res.resulet+'-----END PUBLTC KEY-----');
					//加密
					let phoneNum = this.phoneNum+''//强制转字符串
					let data = {
						phoneNum:jse.encrypt(phoneNum )
					}
					this.$Api.register(data).then(res=>{
						console.log(res)
					})
			}
		}) 
}