로그인 ID check

GOAL : 로그인할때 (로그인 버튼을 눌렀을때) database에 있는 id와 password만 로그인 할 수 있도록 하고 id나 password가 틀리면 경고창 띄우기

 

1. router에서 login_check (임의) URL설정해주기

 

login버튼을 눌렀을때 form의 action URL을 router에서 받아준다..

<form action="/user/login_check" method="post">
    <table>
        <tr>
            <td id="userid">ID</td>
            <td><input type="text" name="userid"></td>
        </tr>
        <tr>
            <td id="userpw">PASSWORD</td>
            <td><input type="password" name="userpw"></td>
        </tr>
    </table>
    <input type="submit" value="LOGIN">
</form>

ROUTER에서

router.post('/login_check',controller.login_check);

 

2. 이어지는 controller설정을 해준다.

 

전체코드

let login_check = async (req,res)=>{
    let userid = req.body.userid;
    let userpw = req.body.userpw;

    let result = await User.findOne({
        where:{ userid, userpw }
    });

    if(result == null){
        res.redirect('/user/login?flag=0');
    } else {
        req.session.uid = userid;
        req.session.isLogin = true;
    
        req.session.save(()=>{
            res.redirect('/');
        })
    }
}

 

2-1. userid와 userpw를 가지고 와서 변수에 담아준다.

 

    let userid = req.body.userid;
    let userpw = req.body.userpw;

 

2-2. 두개의 값을 contain 하고 있는 데이터를 database에서 찾아 변수에 담는다.

 

    let result = await User.findOne({
        where:{ userid, userpw }
    });

=> 이때 id와 pw가 틀리면 result의 값이 null이 된다.

 

2-3. 2-2번의 결과를 참고해서 if문을 만든다.

 

    if(result == null){
        res.redirect('/user/login?flag=0');
    } else {
        req.session.uid = userid;
        req.session.isLogin = true;
    
        req.session.save(()=>{
            res.redirect('/');
        })
    }

 

result가 null이라면 (id와 pw가 database에 없다면) localhost:3000/user/login?flag=0 으로 이동한다.

result가 null이 아니라면 session에 값을 저장해서 localhost:3000으로 이동한다.

 

3. 2번이 성공했을때와 아닐때를 구분해준다.

 

{% if flag == '0'%}
<script type="text/javascript">

    alert('CHECK YOUR ID or PASSWORD');
    
</script>
{% endif%}

=> HTML 태그들을 변수로 불러와서 색상을 변경하거나 할 수 있다.

예시)

    const id = document.querySelector('#userid');
    const pw = document.querySelector('#userpw');
    id.setAttribute('style','color:red;');
    pw.setAttribute('style','color:red;');
    id.addEventListener('focus',()=>{
        id.setAttribute('style','color:#000;');
    })
    pw.addEventListener('focus',()=>{
        pw.setAttribute('style','color:#000;');
    })

 

결과

 

A. 로그인 성공

 

B. 로그인 실패

 

uri값이redirect했던 값으로 바뀐 걸 볼 수 있다.