为防止用户账户 密码和敏感信息的泄露,在用户登录系统或提交表单时进行信息加密
第一步:首先安装加密依赖
npm install crypto-js --save-dev
or 淘宝镜像安装
cnpm install crypto-js --save-dev
第二步:再新建security.js文件
/**
* AES加密文件
* **/
var CryptoJS = require("crypto-js");
const secretKey ='keychange0@#$%^&' // 该值为密钥(可任意输入16位长度的字符串)
// 加密
const encryptByAES = (message) => {
let key = CryptoJS.enc.Utf8.parse(secretKey);
let srcs = CryptoJS.enc.Utf8.parse(message);
let encrypted = CryptoJS.AES.encrypt(srcs, key, { mode:CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
return encrypted.toString();
}
// 解密
const decryptByAES = (msg) => {
var keyHex = CryptoJS.enc.Utf8.parse(secretKey);
var decrypted = CryptoJS.AES.decrypt({
ciphertext: CryptoJS.enc.Base64.parse(msg)
}, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
export {
encryptByAES,
decryptByAES
}
上述完成后,我们需要在axios 拦截器中加密相应报文即可
第三步: http.js 中,axios拦截器进行报文加密
import axios from 'axios'
import router from '@/router'
import { encryptByAES,decryptByAES} from '@/libs/security.js'
import store from '@/store'
import { getToken } from '@/libs/auth'
import Code from '@/libs/code'
import config from '@/config'
const _this = this
let baseUrl = ''
if (process.env.NODE_ENV === 'production') {
if (process.env.VUE_APP_FLAG === 'pro') {
// production 正式环境
baseUrl = config.baseUrl.pro
} else {
// test 测试环境
baseUrl = config.baseUrl.test
}
} else {
// dev 开发环境
baseUrl = config.baseUrl.dev
}
// create an axios instance
const service = axios.create({
baseURL: baseUrl, // api的base_url
timeout: 1800000 // request timeout
// withCredentials: true // 使前台能够保存cookie
})
// request interceptor
service.interceptors.request.use(config => {
// Do something before request is sent
let token = getToken()
if (token) {
config.headers['Authorization'] = token
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
if (config.data) {
// 数据加密
config.data = {
secretMsg: encryptByAES(JSON.stringify(config.data))
}
}
return config
}, error => {
// Do something with request error
Promise.reject(error)
})
// respone interceptor
service.interceptors.response.use( res => {
if (res.data.code === 0) {
// 如果后台返回的json显示成功,pass
return res
} else {
// 返回错误情况
return Promise.reject(res.data)
}
}, err => {
return Promise.reject(err)
})
export default service
以上步骤即可完成加密
第四步:在api文件下,写对应的请求地址
import service from '@/libs/request'
export default {
// 获取字典数据
getCollectionBook (data) {
return service({
url: '/xxxxr/api/cwordbook/findSaleAreaList',
data,
method: 'post'
})
}
}
最后贴一张加密后的http 请求