23/12/06 TIL __ 세션 저장 후 출력 undefined

 

 

🐣  상황

 

세션에 대한 개념이 헷갈려서 다시 테스트 하던 도중 오류를 만났다. 

req.session.name = '빌리'

로 해서 저장까지는 성공 했는데,

다른 경로에서 console.log(req.session )을 호출해 보니 안에 name이 없었다.

🫠 문제  __ 세션에 저장한 값을 왜 못불러 오는가?

// '/nana' 경로로 저장 후, '/gaga'경로로 요청시 req.session을 출력해 봤다.
세션 Session {
  cookie: {
    path: '/',
    _expires: null,
    originalMaxAge: null,
    httpOnly: true,
    secure: true
  }
}
//저장했던 키밸류가 보이지 않는다.

이유를 알지 못해 한참을 뒤적였는데, 그 경험을 공유해 보려 한다.

 

 

 

---

 

 

🚍  해결 과정

 

 

 

💜 접근 1. 명령어를 제대로 사용하였는가?

 

내가 알고있던 req.session에 값을 집어넣는 방식은 아래와 같았다.

req.session.키이름 = 넣을값

 

저장하려고 한 세션은 저장 후 콘솔에도 출력되고, 저장소에도 저장 된것을 확인하였다. 

 

그럼 저장문제가 아니라 불러오는 부분 문제라고 생각했지만,

단순히 req.session 을 출력해도 방금 저장한 키 벨류가 나오지 않았다. 

express-session  공식문서를 찾아봐도 명령어가 다른부분을 찾지 못했다.

그럼 명령어 문제는 아닌거 같아 다른 문제를 찾아봤다. 

 

 

 

🩵 2. 설정시 순서가 제대로 되어있는가?

 

express-session을 사용할때 app.js 파일에서 순서는 매우매우 중요하다. 

 

나의 경우 언제나 최상단은  import해오는 애들, 

중간단계에는 app.use(cookie-paser) 같은 애들을 불러오고

그 아래 app.use('/', router)과 같이 라우터 연결후 

가장 하단에 포트 확인용 app.listen을 걸어준다. 

 

근데 문제가 발생했으니 다시 점검을 해봤다. 

stack over flow에 따르면, app.use(session()) 후에 app.get('/api', fuction(){}) 등의 경로가 지정되어야 한다고 했다. 

나는 그렇게 되어져 있는 상황이라 이것도 문제의 원인은 아닌듯 했다. 

https://stackoverflow.com/questions/72099030/req-session-is-undefined-when-using-express-session

req.session is undefined when using express-session

 

 

 

💛  3.기존 파일들 때문에 어떤 상호작용으로 인해서 작동하지 않는가?

 

기존에 작업하던 내용들이 영향이 있을수도 있겠다 싶었다. 

에러처리 미들웨어가 동작하고 있었기 때문이다. 

그래서 그냥 새로운 파일을 만들고, 필요한 부분만 가져와서 다시 테스트를 해봤다.

그러나 여전히 작동하지 않았다.

도데체 뭐가 문제일까 싶었고, 세션으로 이렇게나 해맬줄 몰랐다.

 

 

 

❤️ 4. 분명 설정에서 뭔가 잘못되었다. !!! 

 

아무리 찾아봐도 설정이 문제인것 같아 app.use(session()) 부분을 수정해 봤다. 

 

기존코드이다.

app.use(
  session({
    secret: "dfjsd",
    resave: false,
    saveUninitialized: false,
    store: new FileStore(), 
    cookie: {
      httpOnly: true,
      secure: true,
    },
  })
);

 

 

여기서 아래부터 차근차근 테스트 해보려고 추석을 해봤다.

app.use(
  session({
    secret: "dfjsd",
    resave: false,
    saveUninitialized: false,
    store: new FileStore(), //db에 저장하는게 더나음.
  })
);

 

 

근데 출력 결과가 바뀌었다. 

세션 Session {
  '1': 'hoho',
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },
  __lastAccess: 1701833296665
}

 

 

 

저기어 어떤부분 때문에 작동하지 않는건지 알 수 없었다. 

하나씩 테스트를 시작했다. 

 

 

 

1. httpOnly: true만 남긴다.

cookie: {
  httpOnly: true, 
},

//console 출력 결과
저장 Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },
  ooo: '오오오'
}
[session-file-store] will retry, error on last attempt: Error: ENOENT: no such file or directory, open 'sessions/hcpnvboE1X2FIItiL8B84DF7GygIjZl-.json'
출력 Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },
  ooo: '오오오',
  __lastAccess: 1701836169550
}

 

 

2. secure: true 만 남긴다.

cookie: {
  secure: true,
},

//console 출력 결과
저장 Session {
  cookie: {
    path: '/',
    _expires: null,
    originalMaxAge: null,
    httpOnly: true,
    secure: true
  },
  ooo: '오오오'
}
출력 Session {
  cookie: {
    path: '/',
    _expires: null,
    originalMaxAge: null,
    httpOnly: true,
    secure: true
  }
}

 

 

 

찾았다.!!!!!   

secure 옵션이 문제였던것!!

이 옵션을 true에서 false로 바꿔주자 바로 원하는대로 출력되기 시작했다.

 

 

근데 이 옵션들은 어떤걸 의미하는 걸까?

그냥 보안상에 중요한 요소라고만 알고 사용했는데 

좀더 살펴보았다.

 

 

🚓  httpOnly: true 

이렇게 설정하면 클라이언트쪽 javaScript에서 쿠키에 접근할 수 없다. 

보안상 중요한 옵션이다. 

🚙 secure: true 

이렇게 설정하면, http 연결에서 전송되는걸 방지하고, https 프로토콜을 통해서만 전송된다.!!!

보안상 중요한 옵션이긴 하지만, 개발중에는 주로 false로 설정되어 사용되는 경우가 많고, 

실제  https 환경에서만 쿠키가 전송된다. 

 

 

계속 http로 요청을 보냈기 때문에 작동하지 않았던 것!!

 

 

🫠  느낀점

 

세션에 이렇게 많은 시간을 사용할 줄 몰랐다.

사실 안다고 생각했지만 제대로 몰랐던게 더 컸던것 같다.

언제나 문제가 생기면 다양한 방법으로 시도해 보고

가장 중요한 건 그 방법들을 기억하는게 중요한 것 같다.