• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

자동 로그인 구현 질문

20.03.22 18:58 작성 조회수 457

0

안녕하세요
자동 로그인을 구현해보려고 하는데 몇주째 안되고 있어서 질문 드립니다..

계정 정보를 쿠키에 암호화하여 저장해서 자동 로그인을 구현하려고 하고 있습니다.
useEffect 에서 쿠키 확인 후에 dispatch 시키면 로그인 쿠키도 잘 넘어오고 정상적으로 로그인이 되는데요,

SSR에서 구현하려고 _app.js 에 getInitialProps 안에 코드를 넣으면 될 것 같아서

const auto = ctx.req.cookies.auto ? JSON.parse(ctx.req.cookies.auto) : null;
ctx.store.dispatch({
type: LOG_IN_REQUEST,
data: {
        auto.email,
        auto.password
  }
});

대략 이런식으로 넣어서 사용하려고 했는데 유저 정보는 넘겨 받지만 서버쪽이나 브라우저에서 로그인을 인식하지 못하고 로그인 쿠키값도 넘어오지 않아서 axios.defaults.withCredentials = true; 이 값을 넣어도 안되더라구요..

1. 이 방법이 잘 못된 방법인가요?..

2. express session에서 쿠키값을 넘겨받지 못하고 로그인 되지 않는 이유가 무엇인가요?..

course-thumbnail

React로 NodeBird SNS 만들기

답변 7

·

답변을 작성해보세요.

0

조현영님의 프로필

조현영

지식공유자

2020.05.21

저도 전체 코드를 보지 못하여 정확한 원인 분석은 어렵습니다. 다만, 제 소스코드 ch7이나 ch8을 클론해서 비교해보시면 좋을 것 같습니다. 걔네 둘은 getInitialProps로 SSR을 하고 있습니다.

0

김웅님의 프로필

김웅

질문자

2020.05.20

결국에는 getInitialProps 쪽에서 처리하는게 아닌, useEffect를 사용하여 마운트 된 후에 로그인을 시도하는 방식으로 처리 했었는데요...

혹시 처음부터 서버쪽에서 로그인을 시킬 수 있게 자동 로그인을 구현할 방법이 없을까요?..

_app.js 파일의 getInitialProps 안에서 dispatch 시켜도 로그인 처리가 되지 않습니다..
검색해보니 SSR 쪽에선 로그인이 안되는 것 같은데 다른 방법을 도저히 못찾았습니다ㅜㅜ

0

조현영님의 프로필

조현영

지식공유자

2020.03.22

혹시 로그인 라우터에서 프론트엔드로도 쿠키를 다시 보내나요? 백엔드에 로그인할 때 쿠키가 저장되었다면 그걸 다시 프론트로도 보내서 백엔드와 프론트엔드 쿠키를 일치시켜야 합니다. 백엔드와 프론트엔드 주소로 각각 들어가서 개발자도구에서 Application -> Cookie에서 쿠키가 제대로 들어갔는지 확인해보셔야 합니다.

0

김웅님의 프로필

김웅

질문자

2020.03.22

if(ctx.isServer){
    var isLogined = ctx.req.cookies.[login session cookie name] ? true : false;
    var auto = ctx.req.cookies.[auto login cookie name] ? JSON.parse(ctx.req.cookies.[auto login cookie name])
: null;
    if(!isLogined && auto){
      var bytes1 = CryptoJS.AES.decrypt(auto.em, process.env.COOKIE_SECRET);
      var bytes2 = CryptoJS.AES.decrypt(auto.pa, process.env.COOKIE_SECRET);
      var email = JSON.parse(bytes1.toString(CryptoJS.enc.Utf8));
      var password = JSON.parse(bytes2.toString(CryptoJS.enc.Utf8));
      ctx.store.dispatch({
        type: LOG_IN_REQUEST,
        data: { email, password }
      });
    }
 }

이미 로그인이 되었는지 구하고, 자동 로그인 쿠키값도 구해서 CryptoJS로 암호화된걸 해제하여 dispatch로 보내는 식으로 코드를 짜보았지만 처음 로드 시에 로그인이 된 것 처럼 나오지만 글을 쓰거나 페이지를 이동했을 때 로그인이 되지 않았다고 나오네요..

0

조현영님의 프로필

조현영

지식공유자

2020.03.22

로그인 라우터는 req.isAuthenticated가 없을텐데 어떤 라우터에 req.isAuthenticated 미들웨어가 붙어있나요?

0

김웅님의 프로필

김웅

질문자

2020.03.22

네. 로그인 라우터는 모두 이렇게 만들어져 있는 라우터를 사용하고 있습니다.

router.post('/login', (req, res, next) => {
    passport.authenticate('local', (err, user, info) => {
...

dispatch코드를 getInitialProps 여기에 넣었을 때, passport.authenticate를 성공하여 유저의 정보는 가져오지만 세션이 생성되지 않는 것 같습니다

req.isAuthenticated() 이 코드에서 막히는 걸 보면 로그인이 되지 않는 것 같습니다..

0

조현영님의 프로필

조현영

지식공유자

2020.03.22

자동로그인을 할 때 라우터에서 passport.authenticate를 진행하나요? passport를 거치지 않으면 로그인 자체가 안 됩니다.

이 글과 비슷한 Q&A