Vue和Axios是當(dāng)前前端開發(fā)中使用最廣泛的兩個(gè)框架和庫。而在敏感數(shù)據(jù)傳輸方面，加密是至關(guān)重要的一項(xiàng)措施。本文將著重介紹Vue和Axios加密的過程。

在使用Axios發(fā)送請(qǐng)求獲取數(shù)據(jù)時(shí)，我們需要使用秘鑰（secret）來保證數(shù)據(jù)的安全性。加密可以使用第三方庫進(jìn)行，例如crypto-js，也可以自己編寫加密函數(shù)。為了更好的演示加密，我們來看看一個(gè)簡(jiǎn)單的例子。

const crypto = require('crypto')
const key = '0123456789abcdef0123456789abcdef'
const iv = 'abcdef9876543210abcdef9876543210'
function encrypt(text) {
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv)
let encrypted = cipher.update(text, 'utf8', 'hex')
encrypted += cipher.final('hex')
return encrypted
}
function decrypt(text) {
const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv)
let decrypted = decipher.update(text, 'hex', 'utf8')
decrypted += decipher.final('utf8')
return decrypted
}
const text = 'hello world!'
const encrypted = encrypt(text)
console.log('encrypted:', encrypted)
const decrypted = decrypt(encrypted)
console.log('decrypted:', decrypted)

上述代碼使用了node.js自帶的crypto庫。其中key和iv是加密時(shí)用到的參數(shù)，可以由后端人員提供或者由前端人員自己定義。encrypt(text)函數(shù)用于加密，decrypt(text)函數(shù)用于解密。再結(jié)合Axios使用，代碼如下。

import axios from 'axios'
import { encrypt } from './crypto.js'
const key = '0123456789abcdef0123456789abcdef'
const iv = 'abcdef9876543210abcdef9876543210'
axios.interceptors.request.use((config) =>{
const data = config.data ? JSON.stringify(config.data) : ''
const encryptedData = encrypt(data, key, iv)
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
config.data = { encryptedData }
return config
}, (error) =>{
return Promise.reject(error)
})

我們使用Axios的攔截器，將請(qǐng)求的數(shù)據(jù)使用encrypt函數(shù)進(jìn)行加密，并把加密后的數(shù)據(jù)存放在encryptedData中，最后把encryptedData賦值給config。這樣就可以在后端獲取到加密后的數(shù)據(jù)進(jìn)行解密了。