vue AES加密 防止xss攻击

为防止用户账户 密码和敏感信息的泄露，在用户登录系统或提交表单时进行信息加密

第一步：首先安装加密依赖
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 请求