导语：在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) {}})
