[Nodejs] 로그인/회원가입 구현하기 (세션유지편)

2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 ( 회원가입편 )

2021.05.20 - [내가 공부하는것/JavaScript] - [NodeJS] 로그인/회원가입 구현하기 (로그인편)

 

>> 내용이 잘 보이지 않는다면 우측 하단의 달 모양을 클릭해주시기 바랍니다. <<

 

로그인/회원가입을 구현하면서 가장 문제가 되는 부분은 아무리 생각해도 세션부분인것같다.

세션을 어떻게 관리하냐에 따라 좌지우지 될 것 같은데 일단 기본적인 구현 방법을 알아보자.

 

이전에 작성된 글을 보고 진행을 하면 큰 도움이 된다.

 

---

 

cors, express-session , cookie-parser 이 세가지를 이번 세션유지를 하는데 사용할것이다.

 

  미들웨어

먼저, 미들웨어를 작성해주자.

 

index.js

const cors = require('cors')
const session = require('express-session')
const cookieParser = require('cookie-parser')

app.use(cors({
    origin : true,
    credentials : true
}))
app.use(cookieParser());
app.use(
    session({
        key: "loginData",
        secret: "testSecret",
        resave: false,
        saveUninitialized: false,
        cookie: {
            expires: 60 * 60 * 24,
        },
    })
);

 

이런식으로 작성을 해 준다.

먼저, 차근차근 왜 작성을 했는지 알아보도록 하자.

 

 

  cors()

app.use(cors({
    origin : true,
    credentials : true
}))

 

먼저, cors는 왜 작성하였는가?

다들 프론트와 백엔드로 통신을 할 때 'Access-Control-Allow-Origin' 오류가 낫던 경험이 있을것이다.

이는 CORS 정책때문에 생긴것인데 이에 관한 내용은 차후 기회가 되면 자세히 알아보도록 하겠다.

 

다시 본론으로 돌아와서

origin 이것은 데이터 요청을 하면 origin 이라는 헤더를 포함하게 된다.

이 때 origin은 우리가 흔히 알고있는 도메인의 형태를 띄는데 이것들을 모두 허용해준다는 뜻으로 true를 작성한다.

하지만, 꼭 true 가 아닌 특정 url을 적어두어도 좋다.

 

다음으로는 credentials이다

Access-Control-Allow-Credentials를 true로 해주기 위해서 작성을 해 두었다.

이 부분에 대해서 설명을 하자고 하면 너무 글이 길어지므로 따로 문서를 찾아보는것을 추천한다

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

  cookieParser()

 

이는 말 그대로 요청된 쿠키를 쉽게 추출할 수 있도록 도와주는 모듈이다.

app.use(cookieParser());

 

  express-session

위에서 express-session을 session으로 지정을 해 두었다.

app.use(cookieParser());
app.use(
    session({
        key: "loginData",
        secret: "testSecret",
        resave: false,
        saveUninitialized: false,
        cookie: {
            expires: 60 * 60 * 24,
        },
    })
);

 

session이 저장될 key값을 정해주고,

secret은 서명에 필요한 값 이라고 할 수 있습니다. 여기 위에 두가지는 따로 env 파일에 저장해두는것이 좋다고 생각이 된다.

resave 는 간단하게 수정이 되지 않아도 다시 저장을 할건지에 관한 내용인데 우선, false로 해두었으며

saveUninitialized는 false를 선택하면 로그인 세션을 구현하거나 서버 스토리지 사용량을 줄이거 나 쿠키를 설정하기 전에 권한이 필요한 법률을 준수하는데 유용하기에 false로 지정해두었다.

 

마지막으로 cookie 인데, 이 cookie를 이용하여 세션을 관리해준다. 이 때 expires 라는 속성은 이 쿠키가 얼마나 지속이 될것인지 설정을 하는 부분 이다.

 

이렇게 미들웨어 설정은 끝난거같으니 다음으로 넘어가보자.

 

  AXIOS

react, vue, anguler 등의 프레임워크에서 대부분  axios 를 이용한 데이터처리를 할것으로 생각이 된다.

그러므로

    axios.defaults.withCredentials = true

해당 코드를 세션을 관리하고자하는 파일에서 꼭 작성해주기 바란다.

 

 

  Auto Check

 

각종 프론트 프레임워크의 라이프사이클에는 컴포넌트가 업데이트 되기 전 작업을 하는 부분이 있을텐데, 이 부분에서 get 요청을 해주면 좋다.

이제 어디로 해주어야하는지 알아보자.

 

router.js

router.get('/loginCheck', (req,res) =>{
    if(req.session.loginData){
        res.send({loggedIn : true, loginData: req.session.loginData})
    }else{
        res.send({loggedIn : false})
    }
})

이런 형식으로 작성이 된곳으로 get 요청을 해주시면 된다.

여기서 보면 session에 저장된 loginData 값이 있으면 loginData에 세션데이터를 담아서 보내주게 되는데 이 값을 이용하면 자동 로그인은 문제가 없다고 생각한다.

 

 

  로그 인/아웃

 

AutoCheck를 해주면 좋지만, 로그인이 되었을때와 로그아웃을 했을 때 어떻게 관리를 해야하는지 한번 알아보자.

이번 코드는 정말 간단하게 어떤식인지만 작성을 할것이다.

 

router.js

router.post('/login', (req,res) =>{
    if(/* 로그인성공 */){
    	req.session.loginData = //유저데이터
        req.session.save(error => {if(error) console.log(error) })
        res.json({message : 'success'})
    }else{
        /* 로그인실패 */
        res.json({message : 'fail'})
    }
})

router.post('/logout', (req,res) =>{
    if(/* 세션정보가 있을때 */){
        req.session.destroy(error => {if(error) console.log(error) })
    }else{
        /* 세션정보가 없을때 */
    }
})

이와같은 구조로 작성을 할 수 있는데, 여기서 사용된것을 보면 정말 간단하고 할 수 있다

말 그대로, 세션 내부에 있는 loginData 에 유저데이터를 저장해주고

save 했을 때 오류내용이 있으면 오류를 보내준다.

그리고 success 메세지를 보내주는데 이거 뭔가 잘못된 코드같기도하고,,, 잘 모르겠다

 

그리고 로그아웃 시 해당 세션값을 모두 destroy 시켜준다.

 

이러면 회원가입부터 세션관리까지 모두 완성된다.