vue接口请求加密实例

我来详细讲解一下“Vue接口请求加密实例”的完整攻略。整个过程可以分为以下几个步骤：

1. 生成密钥
2. 加密请求参数
3. 发送加密后的请求
4. 服务器验证签名并进行解密

下面我会就每一个步骤进行详细讲解，并给出两个示例说明。

步骤一：生成密钥

在前端与后端约定好密钥算法后，前端需要先生成密钥。这里我们以sha256算法为例：

const crypto = require('crypto')
const secret = 'my secret key'
const hash = crypto.createHash('sha256').update(secret).digest('hex')

其中，secret为生成密钥所需的原始字符串，createHash('sha256')代表使用sha256算法创建hash对象，.update(secret)将原始字符串传给hash对象进行计算，.digest('hex')则是将计算结果转换为16进制字符串作为密钥进行后续的加密操作。

步骤二：加密请求参数

生成密钥后，前端将请求参数按照规定的顺序进行排序，并将排序后的键值对拼接成一个字符串，例如：

const params = { name: 'Tom', age: 18 }
const sortedParams = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&')

排序后的字符串为age=18&name=Tom，接着利用上一步生成的密钥对这个字符串进行加密：

const cipher = crypto.createCipher('aes192', hash)
let encrypted = cipher.update(sortedParams, 'utf8', 'hex')
encrypted += cipher.final('hex')

其中，createCipher('aes192', hash)表示使用AES192算法创建一个加密对象，第二个参数是前面生成的密钥hash，cipher.update(sortedParams, 'utf8', 'hex')表示将排序后的字符串按照utf8编码转换为二进制数据，再将其加密为16进制字符串，cipher.final('hex')则表示将加密结束，并将最终结果转换为16进制字符串。

步骤三：发送加密后的请求

接下来就是发送加密后的请求了。在请求前，需要将加密后的内容与当前时间戳一同打包到请求头中，我们可以利用axios的interceptors拦截器来完成：

axios.interceptors.request.use(config => {
  const timestamp = new Date().getTime()
  const sortedParams = Object.keys(config.params).sort().map(key => `${key}=${config.params[key]}`).join('&')
  const cipher = crypto.createCipher('aes192', hash)
  let encrypted = cipher.update(sortedParams, 'utf8', 'hex')
  encrypted += cipher.final('hex')
  const headers = {
    'Timestamp': timestamp,
    'Content-MD5': encrypted
  }
  return { ...config, headers }
})

在拦截器中，先获取当前的时间戳，然后按照前面排序规则对请求参数进行排序并加密成16进制字符串，最后将加密后的内容与时间戳打包在headers中，以Timestamp和Content-MD5键名的形式发送给后端。

步骤四：服务器验证签名并进行解密

最后一步是后端对请求进行验证和解密。后端需要先通过时间戳判断请求是否过期，再通过加密内容和密钥进行MD5校验。如果校验通过，则说明请求的内容没有被篡改，可以进行解密操作，解密代码如下：

axios.interceptors.response.use(response => {
  const timestamp = response.headers.timestamp
  const contentMD5 = response.headers['content-md5']
  const sortedParams = Object.keys(response.data).sort().map(key => `${key}=${response.data[key]}`).join('&')
  const hash = crypto.createHash('sha256').update(secret).digest('hex')
  // 验证时间戳和签名是否有效
  if (timestamp <= new Date().getTime()) {
    const cipher = crypto.createDecipher('aes192', hash)
    let decrypted = cipher.update(contentMD5, 'hex', 'utf8')
    decrypted += cipher.final('utf8')
    // 解密结果为JSON字符串
    const result = JSON.parse(decrypted)
    return { ...response, data: result }
  } else {
    throw new Error('请求已过期')
  }
})

在拦截器中，先获取返回头中的时间戳和加密内容，并按照排序规则将请求参数拼接起来生成一个新的哈希值。然后根据密钥解密加密内容，最后将解密后的JSON字符串转换为JS对象，并将其作为新的响应返回给前端。

以上就是完整的“Vue接口请求加密实例”的攻略，下面我将举两个实例来说明。

示例一：加密Get请求

axios.get('/api/data', { params: { name: 'Tom', age: 18 } }).then(response => {
  console.log(response.data)
})

在拦截器中，axios会拼接请求头中的name=Tom&age=18和时间戳timestamp，然后计算其MD5值contentMD5并进行加密。后端在接收到请求后，先校验时间戳是否有效，如果有效则进行解密操作，最后将解密后的结果返回给前端。

示例二：加密Post请求

axios.post('/api/data', { name: 'Tom', age: 18 }).then(response => {
  console.log(response.data)
})

在拦截器中，axios会将请求主体中的JSON字符串{"name":"Tom","age":18}和时间戳timestamp进行合并，然后计算其MD5值contentMD5并进行加密。后端在接收到请求后，先校验时间戳是否有效，如果有效则进行解密操作，最后将解密后的结果返回给前端。

以上就是两个示例，通过这些示例可以更好地理解“Vue接口请求加密实例”的完整攻略。