Express + TypeScript JWT Request 에러

jwt 인증을 구현하다가 발생한 에러와 처리 과정을 적어보려고 한다.
우선 아래는 코드의 일부인데 보는 것처럼 user 프로퍼티가 request에 존재하지 않는다는 그런 에러이다. 당연하다 req에 user를 포함한다는 타입을 따로 지정해 주지도 않았기 때문이다. 그래서 처음에는 interface를 정의하여 타입을 캐스팅하여 사용하려 했었다. 하지만 일일이 as를 적어주는 것도 올바른 해결법이 아니라고 생각이 들었을뿐더러 미들웨어로 사용했을 때 또 다른 오류가 발생한다. 이건 다른 오류이기 때문에 나중에 정리하는 게 나을 것 같다.

jwt.verify(token, process.env.JWT || "", (err: any, user: any) => {
    if (err) return next(createError("403", "Token is not valid!"));

    req.user = user;
    if (callback) {
      callback(req, res, next);
    }

    // if (req.params.id && req.user.id !== req.params.id) {
    //   return next(createError("403", "You are not authorized!"));
    // }

    // return next();
  });

interface를 정의하여 해결하려고 했던 코드

export interface IGetUserAuthInfoRequest extends express.Request {
  user: {
    id: string;
    isAdmin: boolean;
    iat: string;
  }; 
}

export const verifyToken = (
  req: express.Request,
  res: express.Response,
  next: NextFunction,
  callback?: (
    req: express.Request,
    res: express.Response,
    next: NextFunction
  ) => void
) => {
  const token = req.cookies.access_token;
  if (!token) {
    return next(createError("401", "You are not authenticated!"));
  }
  jwt.verify(token, process.env.JWT || "", (err: any, user: any) => {
    if (err) return next(createError("403", "Token is not valid!"));
    (req as IGetUserAuthInfoRequest).user = user;
    console.log(user);
    next();
  });
};

타입확장

결국 문제를 해결한 방법은 Request 객체에 우리가 원하는 타입이 있다는 것을 알려주는 타입 확장이다. d.ts 파일을 만들고 tsconfig.json 설정을 변경시켜주는 것이다. 해결방법의 순서는 다음과 같다.

1. type을 정의하는 폴더를 하나 생성하고 아래에 express.d.ts파일을 만든다.
2. 생성한 파일에서 아래와 같이 자신이 Request 객체에 추가할 속성을 추가한다.

declare namespace Express {
  export interface Request {
    user: {
      id: string;
      isAdmin: boolean;
      iat: string;
    };
  }
}

3. tsconfig.json 설정
   typeRoots라는 필드를 추가(혹은 수정)하여 경로(나의 경우 ./types )와 "./node_moudules/@types"를 작성하면 된다.
   

이렇게하여 빨간 밑줄이 사라지고 에러를 해결하였다!

참조 블로그