인프런 - Login - 2

session을 사용해 로그인페이지를 구현해보자!

app.get('/auth/login', (req, res)=>{
    var output = `
        <form action="/auth/login" method="post">
            <p>
                <input type="text" name="username" placeholder="username">
            </p>
            <p>
                <input type="password" name="password" placeholder="password">
            </p>
            <p>
                <input type="submit">
            </p>
        </form>
    `
    res.send(output)
})

 

output을 사용해 기본 로그인창의 틀을 만들어줍니다!

submit을 하면 같은 라우터인 /auth/login에 가지만 get 방식에서 post 방식으로 바뀌기 때문에 app.post를 만들어봅시다!

app.post('/auth/login', (req, res)=>{
    var savedUser = {
        user : 'jieun',
        pw : '1234',
        displayname : 'Jieun!'
    }
    var user = req.body.username
    var pw = req.body.password
    
    
    if(user === savedUser.user && pw === savedUser.pw) {
        req.session.displayname = savedUser.displayname
        res.redirect('/welcome')
    }
    else res.send(`who are you <a href="/auth/login>login</a>"`)
})

 

실제 로그인창을 만들때는 DB를 사용해 id값과 pw의 값을 가져오겠지만 요건 간단한 코드니까 ㅎㅅㅎ

user에 body에서 가져온 username을, pw에 body에서 가져온 password를 넣어줍니다!

만약 user와 pw 모두 savedUser의 값과 일치를 한다면 session의 displayname을 초기화시켜줍니다! 

그 다음 welcome 페이지로 redirect 해줍니다!

 

그럼 welcome 페이지를 또 만들어야겠죠?

app.get('/welcome', (req, res)=>{
    if(req.session.displayname){
        res.send(`<h1>Welcome : ${req.session.displayname}</h1>
                <a href="/auth/logout"> logout </a>`)
    }
    else {
        res.send(`
            <h1>Login please</h1>
            <a href="/auth/login">login</a>
        `)
    }
})

 

만약 displayname이 존재한다면 ( /auth/login에서 로그인에 성공에서 welcome으로 넘어온 경우 ) welcome과 함께 logout 링크를 제공해줍니다

만약 displayname이 존재하지 않는다면 login 링크를 제공해줍니다!

 

마지막으로 logout 페이지 만들기!

app.get('/logout', (req, res)=>{
    delete req.session.displayname
    res.redirect('/welcome')
})

 

logout 라우터 접속시 저장되어 있던 session의 displayname을 제거해주고 redirect를 통해 welcome 페이지로 이동합니다!

이때 displayname을 제거해준 이유는? welcome에서 displayname이 존재하면 welcome~ 해주기 때문에 displayname을 제거해 다시 로그인 할 수 있는 페이지로 이동할 수 있게 해주는 것입니다~!!

 

그럼 20000~