Express(TypeScript) authMiddleware中间件类型错误排查求助
错误描述(翻译后)
没有匹配的重载调用。
最后一个重载给出以下错误:
类型(req: AuthRequest, res: Response<any, Record<string, any>>, next: NextFunction) => Response<any, Record<string, any>> | undefined无法分配给类型RequestHandlerParams<ParamsDictionary, any, any, ParsedQs, Record<string, any>>。
类型(req: AuthRequest, res: Response<any, Record<string, any>>, next: NextFunction) => Response<any, Record<string, any>> | undefined无法分配给类型RequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>。
参数req和req的类型不兼容。
类型Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>缺少类型AuthRequest中的以下属性:cache、credentials、destination、integrity以及另外13个属性。ts(2769)
问题根源
错误核心在于AuthRequest继承了全局浏览器环境的Request接口,而非Express框架提供的Request类型,导致与Express路由期望的RequestHandler参数类型完全不兼容。
修复方案
1. 导入Express的Request接口
修改auth.middleware.ts的导入语句,明确引入Express的Request类型:
import { Request, NextFunction, Response } from "express"
2. 修正OPTIONS请求逻辑
原代码中OPTIONS请求调用next()后未返回,可能导致后续代码执行,需添加return避免潜在问题。
修改后的完整auth.middleware.ts
import "dotenv/config" import { Request, NextFunction, Response } from "express" import jwt, { JwtPayload, Secret } from "jsonwebtoken" import { CustomHeaders } from "../models" const secretKey: Secret = process.env.secretKey as Secret interface AuthRequest extends Request { user?: JwtPayload } function authMiddleware(req: AuthRequest, res: Response, next: NextFunction) { if (req.method === "OPTIONS") { return next() } try { const token = (req.headers as CustomHeaders).authorization?.split(" ")[1] if (!token) { return res.status(401).json({ message: "Unauthorized" }) } const decoded: JwtPayload = jwt.verify(token!, secretKey) as JwtPayload req.user = decoded next() } catch (error) { return res.status(400).json({ message: "Bad Request" }) } } export default authMiddleware
原理说明
Express的RequestHandler期望接收的请求对象是框架自身定义的Request类型,而非浏览器全局的Request。通过从Express导入并继承正确的Request接口,AuthRequest与路由的参数类型完全兼容,类型错误即可消除。
内容的提问来源于stack exchange,提问作者Darnelo

