要在 Vue 中实现接口返回结果自动调用 AES 解密,你可以使用 Axios 拦截器(interceptor)来处理接口的响应。
首先,确保你已经安装了 Axios:
npm install axios
然后,在你的 Vue 项目中创建一个拦截器文件(例如 interceptor.js
),并编写以下代码:
import axios from 'axios';
import CryptoJS from 'crypto-js';
// 创建一个 AES 解密函数
function decryptData(encryptedData, key, iv) {
const decrypted = CryptoJS.AES.decrypt(encryptedData, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
// 创建 Axios 拦截器
axios.interceptors.response.use(
function (response) {
// 获取接口返回的加密数据
const encryptedData = response.data;
// 解密数据
const decryptedData = decryptData(encryptedData, '密钥', '初始化向量');
// 将解密后的数据替换原始响应数据
response.data = JSON.parse(decryptedData);
return response;
},
function (error) {
return Promise.reject(error);
}
);
export default axios;
在上面的代码中,我们创建了一个 decryptData
函数,用于解密数据。然后,我们使用 Axios 的拦截器,在每次接口响应返回时自动调用该函数进行解密。
请确保将 '密钥'
和 '初始化向量'
替换为你实际使用的值。
使用拦截器后,你可以在你的 Vue 组件中直接使用这个经过拦截器处理的 Axios 实例来发送请求。例如:
import axios from './interceptor';
export default {
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
// 在这里处理解密后的响应数据
const decryptedData = response.data;
console.log('解密后的数据:', decryptedData);
})
.catch(error => {
console.error(error);
});
},
},
};
在上面的示例中,我们通过 axios.get
发送 GET 请求,并在 then
方法中处理解密后的响应数据。
这样,当接口返回加密的数据时,拦截器会自动解密数据,并将解密后的数据替换原始响应数据,使你可以直接使用解密后的数据进行后续操作。
在 Vue 项目中,你可以将 interceptor.js
文件放置在 src
目录下的任何位置。通常,可以将拦截器文件放在 src/utils
目录下或者创建一个新的 src/interceptors
目录来存放拦截器相关的文件。
以下是一个示例项目结构:
- src
- assets
- components
- router
- store
- utils
- interceptor.js
- views
- App.vue
- main.js
在该示例中,interceptor.js
文件被放置在 src/utils
目录下。你可以根据自己的项目结构和组织方式来决定最适合的位置。
确保在使用拦截器之前,在你的 Vue 组件或入口文件(如 main.js
)中引入拦截器文件,以确保拦截器能够生效。
例如,在 main.js
中引入拦截器文件:
import Vue from 'vue';
import App from './App.vue';
import axios from './utils/interceptor';
Vue.prototype.$http = axios;
new Vue({
render: h => h(App),
}).$mount('#app');
这样,拦截器文件将在应用程序启动时被加载,并且在整个应用程序中生效。
请根据你的项目结构和需求,选择合适的位置来放置拦截器文件。