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

导语:在Web开发中,Token作为一种身份验证的机制,被广泛应用于前后端交互过程中。本文将为大家介绍如何在每次请求前动态设置加密的Token,并在请求一次后使Token值加1(或其他动态改变的逻辑),从而提高系统的安全性。

一、背景知识

  1. Token简介 Token是一种身份验证的令牌,通常由服务器生成,客户端在每次请求时携带Token,服务器通过验证Token的有效性来判断请求是否合法。

  2. 为什么要动态设置Token? 动态设置Token可以有效防止恶意请求,提高系统的安全性。通过在每次请求前更新Token,即使Token被泄露,也无法在下次请求中使用。

  3. 为什么Token要加密?Token是用户身份的凭证,如果Token在传输过程中被截获,攻击者可能会利用这个Token进行非法操作。因此,对Token进行加密是提高系统安全性的重要措施。

二、实现思路

  1. 生成初始Token 在用户登录成功后,服务器生成一个初始Token并使用CryptoJS加密,并将其发送给客户端。

  2. 客户端存储Token客户端在收到Token后,将其存储在本地(如localStorage、cookie等)。

  3. 每次请求前更新Token 在发起请求前,客户端从本地获取Token并使用CryptoJS解密,并将其值加1,然后再加密后更新本地存储的Token。

  4. 服务器验证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) {}
            })
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构