uniapp实现加密Token并在每次请求前动态更新(vue、微信小程序、原生js也通用！）

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

bash 复制代码

npm install crypto-js

2、在utils文件夹中新建一个获取token的js文件

javascript 复制代码

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、在发送请求的文件中引入使用

javascript 复制代码

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) {}
            })