当前位置: 首页 > news >正文

基于typescript+express实现一个简单的接口权限验证

 package.json

"scripts": {"start": "nodemon src/main.ts","start:a": "nodemon src/a.ts","build": "tsc","build:dev": "tsc src/main.ts"},

express服务器文件

import * as express from 'express';
import  { Request, Response, NextFunction }  from 'express'
import *  as jwt from 'jsonwebtoken';const app = express();
const secretKey = 'sean';app.use(express.static("static"))interface AuthenticatedRequest extends Request {user?: any;
}
// 登录接口
app.post('/login', (req: AuthenticatedRequest , res: Response) => {// 假设登录验证成功,生成Tokenconst token = jwt.sign({ username: 'admin' }, secretKey, { expiresIn: '1h' });res.json({ token });
});// 验证Token的中间件
const authenticateToken = (req: AuthenticatedRequest , res: Response, next: NextFunction) => {const authHeader = req.headers['authorization'];console.log("authHeader:",authHeader)// const token = authHeader && authHeader.split(' ')[1];const token = authHeader;console.log("token:",token)if (token == null) {return res.sendStatus(401);}jwt.verify(token, secretKey, (err: any, user: any) => {if (err) {console.log("verify-err",err)return res.sendStatus(403);}req.user = user;next();});
};// 需要验证Token的接口
app.get('/protected', authenticateToken, (req: AuthenticatedRequest, res: Response) => {console.log("req",req)res.json({ message: 'Protected route', user: req.user });
});app.get('/list', authenticateToken, (req: AuthenticatedRequest, res: Response) => {console.log("req",req)res.json({ data: [] });
});
app.get("/static",(req,res)=>{res.sendFile("index.html",{root:"./"})
})
// 启动服务器
app.listen(4000, () => {console.log('Server is running on port 4000');
});

在根目录新建一个index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><form ><div><span>用户名:</span><input id="user" type="text" placeholder="please input username"></div><div><span>密码:</span><input id="password" type="password" placeholder="please input username"></div><div><button id="btn">提交</button></div></form><div ><button id="send">send</button></div><div ><button id="listBtn">获取list</button></div></div>
</body>
</html>
<script>let user=document.getElementById("user")let password=document.getElementById("password")let btn=document.getElementById("btn")let sendBtn=document.getElementById("send")let listBtn=document.getElementById("listBtn")const submit=(e)=>{e.preventDefault()let data={username:user.value,password:password.value}fetch("http://localhost:4000/login",{method:"post",body:JSON.stringify(data)}).then(res=>{res.json().then(res=>{console.log("response",res)let token=res.token;sessionStorage.setItem("authorization",token)})})console.log("data",data)}const request=()=>{fetch("http://localhost:4000/protected",{method:"get",headers:{"authorization":sessionStorage.getItem("authorization")}}).then(res=>{res.json().then(response=>{console.log("pretect--response",response)})})}const requestList=()=>{fetch("http://localhost:4000/list",{method:"get",headers:{"authorization":sessionStorage.getItem("authorization")}}).then(res=>{res.json().then(response=>{console.log("pretect--response",response)})})}btn.addEventListener("click",submit)sendBtn.addEventListener("click",request)listBtn.addEventListener("click",requestList)</script>

相关文章:

基于typescript+express实现一个简单的接口权限验证

package.json "scripts": {"start": "nodemon src/main.ts","start:a": "nodemon src/a.ts","build": "tsc","build:dev": "tsc src/main.ts"}, express服务器文件 import * as…...

yolov7改进优化之蒸馏(二)

续yolov7改进优化之蒸馏&#xff08;一&#xff09;-CSDN博客 上一篇已经基本写出来yolov7/v5蒸馏的整个过程&#xff0c;不过要真的训起来我们还需要进行一些修改。 Model修改 蒸馏需要对teacher和student网络的特征层进行loss计算&#xff0c;因此我们forward时要能够返回需…...

生产与作业管理(POM)的历史

1800年&#xff0c;惠特尼&#xff1a;零件标准化、质量管理。 1881年&#xff0c;泰勒&#xff1a;人员选拔、计划和时程安排、动作研究。管理与劳动分开。 - 使雇员与工作相适应。 - 提供适当的训练。 - 提供正确的工作方法和工具。 - 建立适当的激励机制促使工作得以完成。 …...

交换机基础(二)

一、VLAN 基础知识 虚拟局域网 (Virtual Local Area Network,VLAN) 是一种将局域网设 备从逻辑上划分成一个个网段&#xff0c;从而实现虚拟工作组的数据交换技术。 这一技术主要应用于3层交换机和路由器中&#xff0c;但主流应用还是在3层交换机中。 VLAN 是基于物理网络上构建…...

回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于BP-Adaboost的BP神经网络结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BP-Adaboost的BP…...

【蓝桥每日一题]-动态规划 (保姆级教程 篇11)#方格取数2.0 #传纸条

目录 题目&#xff1a;方格取数 思路&#xff1a; 题目&#xff1a;传纸条 思路&#xff1a; 题目&#xff1a;方格取数 &#xff08;跑两次&#xff09; 思路&#xff1a; 如果记录一种方案后再去跑另一个方案&#xff0c;影响因素太多了&#xff0c;所以两个方案要同时开…...

前端TypeScript学习day05-索引签名、映射与类型声明文件

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 索引签名类型 映射类型 索引查询&#xff08;访问&#xff09;类型 基本使用 同时查询多个索引的类型…...

Echarts柱状图数据过多设置滚动条效果

未设置前&#xff1a; 设置后&#xff1a; dataZoom: [ { show: true, height:8, bottom:0, startValue: 0, //起始值 endValue: 5, //结束值 showDetail: fals…...

64 最长公共子序列

最长公共子序列 题解1 DP 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的 最长公共子序列的长度。如果不存在 公共子序列&#xff0c;返回 0 。 一个字符串的子序列是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些…...

matlab常用函数

绘图函数 一、plot()&#xff1a;二维图形绘制 1、plot(y)&#xff1a; 对于只含一个输入参数的plot函数&#xff0c;如果输入参数y为向量&#xff0c;则以该参数为纵坐标&#xff0c;横坐标从1开始至与向量的长度相等&#xff1b;如果输入参数y是矩阵时&#xff0c;则按列绘…...

Python配置镜像源

Python3安装pika的准备 Windows下配置镜像源可以按照如下操作。 1.winR执行%APPDATA% %APPDATA%后&#xff0c;创建pip文件夹&#xff0c;并创建pip.ini配置文件 查看此目录下是否有pip目录&#xff0c;如果没有则需要创建&#xff0c;并在pip目录下以文本方式添加pip.ini文件…...

Linux防火墙Centos6的常用命令iptables

文章目录 一、iptables基础知识二、作者玩玩的配置文件三、iptables中常用的参数以及作用-j参数的动作类型 四、安装iptables五、iptables启动命令六、iptables命令结构命令例子默认执行方式执行iptables命令和写入配置文件两种方式的对比 相对常用的命令参考文档 一、iptables…...

python中的贪心算法-求顾客的最小的等待时间

一. 设有n个顾客同时等待一项服务。顾客i需要的服务时间为ti(1<i<n)。如何安排n个顾客的服务次序才能使顾客总的等待时间达到最小? nint(input(请输入顾客的位数: ))times[] for i in range(n):timeint(input(f请输入顾客{i1}的服务时间: ))times.append(time) times.so…...

【JAVA springframework.http】如何发送HTTP请求

Springboot之restTemplate https://blog.csdn.net/weixin_43702146/article/details/116567707 public Result doHandlePostJson(String restUri, String jsonData)throws Exception {Result result null;try {// logger记录log.info("doHandlePostJson request restUr…...

字符串反转(Python)

1. 整体流程 为了实现递归反转n个字符串的功能&#xff0c;我们可以按照以下步骤进行操作&#xff1a; 步骤动作1定义递归函数2判断递归结束条件3处理递归函数的基本情况4调用递归函数&#xff0c;递归处理子问题5返回递归结果 我将详细解释每一步的具体操作&#xff0c;并提…...

驱动开发day4

通过字符设备驱动的分步实现编写LED驱动&#xff0c;另外实现设备文件和驱动的绑定 head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct {unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int IDR;unsigned int ODR; }…...

Flink之Window窗口机制

窗口Window机制 窗口概述窗口的分类是否按键分区按键分区窗口非按键分区 按照驱动类型按具体分配规则滚动窗口Tumbling Windows滑动窗口 Sliding Windows会话窗口 Session Windows全局窗口 Global Windows 时间语义窗口分配器 Window Assigners时间窗口计数窗口例子 窗口函数 W…...

【C++】继承 ⑧ ( 继承 + 组合 模式的类对象 构造函数 和 析构函数 调用规则 )

文章目录 一、继承 组合 模式的类对象 构造函数和析构函数调用规则1、场景说明2、调用规则 二、完整代码示例分析1、代码分析2、代码示例 一、继承 组合 模式的类对象 构造函数和析构函数调用规则 1、场景说明 如果一个类 既 继承了 基类 ,又 在类中 维护了一个 其它类型 的…...

Spark内核调度

目录 一、DAG &#xff08;1&#xff09;概念 &#xff08;2&#xff09;Job和Action关系 &#xff08;3&#xff09;DAG的宽窄依赖关系和阶段划分 二、Spark内存迭代计算 三、spark的并行度 &#xff08;1&#xff09;并行度设置 &#xff08;2&#xff09;集群中如何规划并…...

STM32串口

前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 目前已经学习了GPIO的输入输出&#xff0c;但是没有完整的显示信息&#xff0c;最便宜的显示就是串口。 000 -111 AVR单片机 已经学会过了&#xff0c; 提示&#xff1a;以下是本篇文章正文内容&#x…...

闲鱼自动回复软件工具闪电鱼助手如何下载?

做闲鱼的人都知道&#xff0c;真正消耗精力的&#xff0c;往往不是上架商品&#xff0c;而是每天重复不断的咨询、议价、催发货和售后回复。这款软件支持在win系统上可以直接使用的软件工具&#xff0c;针对的是闲鱼卖家的“自动客服自动交付”效率工具。 闪电鱼软件 地址&…...

Rust crate 构建与依赖管理

Rust作为一门现代系统编程语言&#xff0c;凭借其出色的性能与安全性吸引了大量开发者。而Rust的模块化设计核心——crate&#xff08;代码库&#xff09;的构建与依赖管理&#xff0c;则是每个Rust开发者必须掌握的关键技能。无论是构建小型工具还是大型项目&#xff0c;高效的…...

BilibiliDown视频下载器终极完整指南:5分钟从新手到高手

BilibiliDown视频下载器终极完整指南&#xff1a;5分钟从新手到高手 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors…...

DEM、DSM、DTM、DOM、TIN:地理空间数据模型的本质区别与应用场景解析

1. 地理空间数据模型的核心概念解析 第一次接触DEM、DSM这些术语时&#xff0c;我也被绕得头晕。直到参与了一个城市规划项目&#xff0c;才真正理解它们的区别。简单来说&#xff0c;这些模型就像给地球表面拍不同类型的"照片"&#xff1a;有的只拍地形&#xff0c;…...

Android开发必看:fitsSystemWindows的5个实际应用场景与避坑指南

Android开发必看&#xff1a;fitsSystemWindows的5个实际应用场景与避坑指南 在Android开发中&#xff0c;fitsSystemWindows这个看似简单的属性&#xff0c;却常常让开发者陷入各种布局适配的困境。特别是在全面屏、刘海屏设备普及的今天&#xff0c;正确处理系统窗口的适配问…...

保姆级教程:用Android Studio 2024.3.2 + ncnn,把YOLOv11模型部署到你的安卓手机上

从零开始&#xff1a;用Android Studio与ncnn实现YOLOv11安卓端高效部署实战 当你第一次听说能在手机上运行目标检测模型时&#xff0c;是不是既兴奋又忐忑&#xff1f;作为计算机视觉领域的标杆算法&#xff0c;YOLO系列以其实时性著称&#xff0c;而最新发布的YOLOv11更是将精…...

终极指南:如何快速免费恢复加密压缩包密码

终极指南&#xff1a;如何快速免费恢复加密压缩包密码 【免费下载链接】ArchivePasswordTestTool 利用7zip测试压缩包的功能 对加密压缩包进行自动化测试密码 项目地址: https://gitcode.com/gh_mirrors/ar/ArchivePasswordTestTool 您是否曾经遇到过这种情况&#xff1…...

SITS2026上线倒计时48小时:我们如何用轻量级MoE替代全量微调,在边缘GPU集群实现多模态搜索QPS翻4倍且成本降63%?

第一章&#xff1a;SITS2026案例&#xff1a;AI原生电商平台实践 2026奇点智能技术大会(https://ml-summit.org) SITS2026是面向下一代电商基础设施的AI原生平台原型&#xff0c;由阿里巴巴达摩院与浙江大学联合研发&#xff0c;在2026奇点智能技术大会上首次全栈开源。该平台…...

大模型API网关性能暴跌67%?SITS2026认证的4种请求整形策略与实时QPS自适应限流算法

第一章&#xff1a;大模型API网关性能暴跌67%&#xff1f;SITS2026认证的4种请求整形策略与实时QPS自适应限流算法 2026奇点智能技术大会(https://ml-summit.org) 当某头部AI平台的LLM API网关在峰值时段突发QPS骤降67%&#xff0c;日志显示92%的超时请求集中于token长度>4…...

鸿蒙ArkTS开发实战:从Java/TS迁移到ArkTS的5个关键语法差异

鸿蒙ArkTS开发实战&#xff1a;从Java/TS迁移到ArkTS的5个关键语法差异 如果你是一名有Java或TypeScript背景的开发者&#xff0c;正准备进军鸿蒙生态的ArkTS开发&#xff0c;那么掌握这些关键语法差异将大幅提升你的迁移效率。ArkTS作为鸿蒙应用开发的主力语言&#xff0c;在设…...