9. boilerplate - 미들웨어에 authorization 추가하기

boilerplate 유튜브 강의 시리즈

Blog ReactJS NodeJS#14 AUTHENTICATION MIDDLEWARE

 

사버의 자원을 이용하기 위해서는 사용자는 인증(Authentication)을 통해 서버로부터 허가(Authorization)를 받아야 한다.

이번 강의에서는 미들웨어를 추가하여 Authorization을 구현했다.

사용자가 로그인을 통해 발급된 token으로 인증 요청을 보내면

미들웨어에서 토큰(인증수단)을 검증하고 올바른 경우 필요한 정보(자원)를 응답해준다.

이 로직을 만드는 것이 이번 강의 내용이다.

 

현재 강의까지 진행된 프로젝트 구조

 

src/server에 middleware폴더를 추가하고 admin, auth 파일을 생성했다.

 

1. auth.js

 

사용자로부터 요청이 오면 토큰을 확인해 올바른 사용자인지 검증하고 올바르다면 user 정보를 반환한다.

import User, {IUser} from '@model/user';
import { Request, Response, NextFunction } from 'express';

let auth = (req:Request, res:Response, next:NextFunction) => {
    let token:string = req.cookies.x_auth;

    User.findByToken(token, (err:Error, user:IUser)=>{
        if(err) throw err;
        if(!user) return res.json({
            isAuth : false,
            error: true
        });

        req.token = token;
        req.user = user;
        next();
    });
};

export { auth };

 

experess의 request에 token과 user 속성을 추가했으므로 기존 라이브러리에도 타입을 추가해줘야한다.

 

2. experess에 타입 추가

 

@types 폴더에 express 폴더를 만들고 index.d.ts에 아래 코드를 작성해준다.

import { IUser } from "@model/user";

declare module 'express-serve-static-core' {
    export interface Request {
        token: string;
        user: IUser;
    }
}

 

3. middleware 경로 등록과 index.ts

 

먼저 위에서 만든 middleware 폴더의 경로를 등록한다.

 

tsconfig.json의 paths항목에 아래처럼 추가하고

"paths": { 
  "@model/*": ["./model/*"],
  "@config/*": ["./config/*"],
  "@middleware/*":["./src/server/middleware/*"]
},  

package.json의 _moduleAliases에도 아래처럼 추가

"_moduleAliases": {
    "@model": "dist/model",
    "@config": "dist/config",
    "@middleware":"dist/src/server/middleware"
},

 

마지막으로 index.ts에 아래 코드를 추가한다.

위에서 작성한 middleware의 auth를 "/api/user/auth"의 미들웨어에 추가하여 검증한다.

import { auth } from '@middleware/auth';

app.get("/api/user/auth", auth, (req: express.Request, res: express.Response)=>{
    res.status(200).json({
        _id: req.user._id,
        isAuth: true,
        email: req.user.email,
        name: req.user.name,
        lastname: req.user.lastname,
        role: req.user.role
    });
})

 

4. 테스트

 

전에 등록했던 아이디로 login 한다.

Cookies 항목을 열어보면 아래처럼 x_auth에 토큰이 저장되어 있다.

Cookies 항목에 아무것도 보이지 않으면 맨 위에 인공지능 모양의 아이콘을 누르고 Postman Interceptor를 설치하고 활성화해줘야 한다.

마지막 권한 테스트

정보가 잘 날라오면 성공