导语：在Web开发中，Token作为一种身份验证的机制，被广泛应用于前后端交互过程中。本文将为大家介绍如何在每次请求前动态设置加密的Token，并在请求一次后使Token值加1（或其他动态改变的逻辑），从而提高系统的安全性。
一、背景知识
-
Token简介 Token是一种身份验证的令牌，通常由服务器生成，客户端在每次请求时携带Token，服务器通过验证Token的有效性来判断请求是否合法。
-
为什么要动态设置Token？ 动态设置Token可以有效防止恶意请求，提高系统的安全性。通过在每次请求前更新Token，即使Token被泄露，也无法在下次请求中使用。
-
为什么Token要加密？Token是用户身份的凭证，如果Token在传输过程中被截获，攻击者可能会利用这个Token进行非法操作。因此，对Token进行加密是提高系统安全性的重要措施。
二、实现思路
-
生成初始Token 在用户登录成功后，服务器生成一个初始Token并使用CryptoJS加密，并将其发送给客户端。
-
客户端存储Token 客户端在收到Token后，将其存储在本地（如localStorage、cookie等）。
-
每次请求前更新Token 在发起请求前，客户端从本地获取Token并使用CryptoJS解密，并将其值加1，然后再加密后更新本地存储的Token。
-
服务器验证Token 服务器在接收到请求后，验证Token的有效性。若Token有效，则处理请求；否则，拒绝请求。
三、具体实现
以下是在uniapp中的实现示例代码，如果你用的是Vue、微信小程序或者原生js也都是通用的，逻辑思路都一样，只是实现代码有些许差别。
1、安装CryptoJS
npm install crypto-js
2、在utils文件夹中新建一个获取token的js文件
import CryptoJS from 'crypto-js'
import {
BASE_URL
} from './request.js'
// 解密函数
function decryptAES(encryptedMessage, secretKey) {
var bytes = CryptoJS.AES.decrypt(encryptedMessage, secretKey);
return bytes.toString(CryptoJS.enc.Utf8);
}
// 加密函数，包含配置项
function encryptAES(message, secretKey) {
let config = {
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
iv: CryptoJS.enc.Utf8.parse('你的密钥')
};
return CryptoJS.AES.encrypt(message, secretKey, config).toString();
}
// 获取token
export const getToken = () => {
return new Promise(async (resolve, reject) => {
const TOKEN= getCookie('TOKEN')
// 如果没有，就先从后端获取
if (!TOKEN) {
try {
const token = await getTokenFromServer()
setCookie('TOKEN', token)
resolve(token)
} catch (e) {
reject(e)
}
}
const key = CryptoJS.enc.Utf8.parse('你的密钥');
const token= encryptAES(TOKEN, key)
resolve(token)
})
}
// 从后端获取Token
function getTokenFromServer() {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + '/auth/terminals',
method: 'get',
success: (res) => {
resolve(res.data)
},
fail: (err) => {
console.log(err)
reject(err)
}
})
})
}
// 获取cookie
function getCookie(name) {
let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)){
let res = decryptAES(arr[2],'你的密钥')
setCookie(name, ++res)
return unescape(res);
}
else{
return null
}
}
// 设置cookie（不设置过期时间）
function setCookie(name, value) {
document.cookie = name + "=" + escape(value);
}3、在发送请求的文件中引入使用
import {getToken} from './getToken.js'
...
...
uni.request({
url: BASE_URL + url, //请求路径
data: data, //请求参数
method: item, //请求方法
header: { //请求头
RequestId: await getToken(), // 此处动态获取token并设置请求头
...config.header
},
// 成功
success: function(res) {}
})