express-validator

[Ji-eun1]

😎   결과

회원가입

2022-09-14.5.41.51.mov

로그인

2022-09-14.5.33.06.mov

🔗 참고 링크

express-validator 공식문서
express-validator ( middleware )
checkSchema / validate 분리

✏️   express-validator 사용 이유

• 처음에는 client-side 에 validation 을 만들었는데, server-side 에 비해 불완전하다는 지적을 받아 바꾸게 되었다.
• client-side validation 은 유저가 임의로 조작할 수 있어 위험하다.
• server-side validation 으로 schema validator 를 사용하려 했으나 update, remove 시 validation 누락되는 문제로 express-validator 를 선택하게 되었다.

🔑   작업과정

백엔드

1. validation > checkSchema.js, validation.js 생성

스키마의 validation 을 체크할 미들웨어를 만든다.

• validation 인증 (O) => 통과
• validation 인증 (X) => 불통, 에러 메시지 전송

checkSchema.js

• case - forum, comment, signup, profile, signin, withdrawal
• 예시로 signin case 만 복붙함

module.exports = (method) => {
    switch (method) {
        case 'signin': {
            return [ 
                check('email')
                .notEmpty()
                .withMessage('아이디를 입력하세요.')
                .custom( async email => {
                        const user = await User.findOne({$and: [ { "email": email }, { "active": "true" } ]} );
                        if(!user) return Promise.reject('아이디와 비밀번호를 다시 확인해주세요.')
                    }   
                ),
                check('password')
                .notEmpty()
                .withMessage('비밀번호를 입력하세요.')
                .custom( async (password, {req}) => {
                        const user = await User.findOne({$and: [ { "email": req.body.email }, { "active": "true" } ]} );
                        const isMatch = await bcrypt.compare(password, user.password);
                        if(!isMatch) return Promise.reject('아이디와 비밀번호를 다시 확인해주세요.')
                    }   
                ),
            ]   
        }
    }
}

validation.js

module.exports = validations => {
    return async (req, res, next) => {
        await Promise.all(validations.map(validation => 
                validation.run(req)
            )
        );

        const errors = validationResult(req);

        if (errors.isEmpty()) { // validation 통과
            return next();
        } else{  // validation 불통'
            res.status(400).json( 
                errors.array()[0].msg
            );
        }
    };
};

2. routes

validation 미들웨어를 통과해야만 controller 가 작동하도록, 미들웨어를 controller 앞에 둔다.
( routes > forums.js 예시 )

router.post('/post', auth, validate(checkSchema('forum')), postForum);
router.put('/update/:id', validate(checkSchema('forum')), updateForum);

프론트

1. 경고창 메시지 넣기

validation 이 불통일 경우, api 호출은 실패한다.
따라서 다음과 같은 식으로 catch 문에서 에러 메시지를 받아 경고창에 띄운다.

const createForum = async (e: FormEventType) => {
    e.preventDefault();
    const body = {
        titleText: titleText,
        mainText: mainText,
        attachImageNames: attachImageNames
    }

    Forums.postForum(body)
    .then(() => {
        setIsSubmit(isSubmit => !isSubmit);
        formReset();
    })
    .catch((err: any) => {  // validation 불통 => 경고창 띄우기
        setAlertShowMessage(err.response.data) 
        setAlertShow(true)
    })
}