0、前言

很多情况下，API都存在安全性问题，而token验证又不能很好的解决安全隐患(抓包可破)，所以一般情况下都推荐使用数据加密的方式。
前端的数据加密方式，一般都会选择：AES加密算法。

1、安装CryptoJS包

使用以下命令安装AES的算法包
npm install crypto-js --save-dev

2、修改我们的全局常量文件

// 全局常量定义
// v1.0.1
// 引入ajax包
import axios from 'axios'
// 设置ajax请求地址，解决跨域问题
const isPro = Object.is(process.env.NODE_ENV, 'production')
// 左为生产环境，右为测试环境
// const baseUrl = isPro ? 'http://juncms.zgnyw.xin/api/' : 'api/';
// 如果你的接口与项目不是同一域名下，可直接将baseUrl设置为对应的接口地址即可，例如：
const baseUrl = 'http://juncms.zgnyw.xin/';
axios.defaults.baseURL = baseUrl;
// 引入qs包
import qs from 'qs'
// 引入CryptoJS包
import CryptoJS from 'crypto-js'
// AES加密密钥
const aes_key = 'abcdefgabcdefg12';
// AES加密
const encrypt = function(word, keyStr) { 
    keyStr = keyStr ? keyStr : aes_key;
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    return encrypted.toString();
}
// AES解密
const decrypt = function(word, keyStr){  
    keyStr = keyStr ? keyStr : aes_key;
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
// 常量表
const config = {
    // ajax插件
    axios:axios,
    // qs插件
    qs:qs,
    // AES加密
    encrypt:encrypt,
    // AES解密
    decrypt:decrypt,
    // 版本号
    edition:'v1.0.1',
    // 项目名称
    entry_name:'Vue2测试项目'
}
// 常量定义函数
let bindToGlobal = (obj, key) => {
     if (typeof window[key] === 'undefined') {
         window[key] = {};
     }
     for (let i in obj) {
         window[key][i] = obj[i]
     }
}
bindToGlobal(config,'_config')

3、.vue模板中的使用案例

<template>
<div id="app">
    <button v-on:click="submit">测试</button>
</div>
</template>
<script>
import Vue from 'vue'
import '../global.js'
export default {
    methods: {
         submit: function(event) {
             console.log(_config.encrypt('欢迎光临'));
             console.log(_config.decrypt(_config.encrypt('欢迎光临')));
        }
    }
}
</script>

4、PHP后端AES的实现

<?php
class Aes {  
    /** 
     * 加解密方法，可通过openssl_get_cipher_methods()获得 
     */  
    protected $method;  
    /** 
     * 加解密的密钥 
     */  
    protected $secret_key;  
    /** 
     * 加解密的向量值，不一定需要
     */  
    protected $iv;  
    /** 
     * 构造函数
     * @param string $key 密钥
     * @param string $method 加密方式
     * @param string $iv iv向量
     */  
    public function __construct($key, $method = 'AES-128-ECB', $iv = '') {  
        $this->secret_key = $key;
        $this->method     = $method;
        $this->iv         = $iv;
    }  
    /** 
     * 加密方法，对数据进行加密，返回加密后的数据 
     * @param string $data 要加密的数据 
     * @return string 
     */  
    public function encrypt($data) {  
        return openssl_encrypt($data, $this->method, $this->secret_key, 0, $this->iv);  
    }  
    /** 
     * 解密方法，对数据进行解密，返回解密后的数据 
     * @param string $data 要解密的数据 
     * @return string 
     */  
    public function decrypt($data) {  
        return openssl_decrypt($data, $this->method, $this->secret_key, 0, $this->iv);  
    }  
}
# 使用demo如下：
$aes = new Aes('abcdefgabcdefg12');  
# 加密
$encrypted = $aes->encrypt('欢迎光临');  
echo '加密后得到的字符串：'.$encrypted.'<hr>';  
# 解密
$decrypted = $aes->decrypt('YV9ZmcYqoinX2QDpidEjww==');  
echo '解密后得到的字符串：'.$decrypted;