Node.js ) 로그인 성공시, 시도한 페이지로 이동하기

> 코드 목적

로그인 기능이 있는 사이트들의 플로우를 생각해보자.

장바구니 클릭 -> 로그인 여부 확인 -> 로그인 안 함 -> 로그인 페이지 -> 로그인 성공 -> 메인 홈

이러한 플로우의 문제점은 사용자가 기존에 가고 싶었던 '장바구니'를 로그인 성공 후, 다시 찾아가야한다는 점이다.

장바구니 클릭 -> 로그인 여부 확인 -> 로그인 안 함 -> 로그인 페이지 -> 로그인 성공 -> 장바구니

위 방식으로 UX를 개선하기 위해, 로그인 성공시 메인 홈이 아니라 '장바구니'로 이동시킬라면 어떤 방법이 제일 효율적일까?

 

처음에 이 개념을 검색했을 땐, 쿠키에 저장한다, 세션에 저장해 가져오고 로그인 성공하면 블라블라... 내용이 나왔다.

과연 세션에 저장하는게 맞을까? 번거로운 플로우 아닐까? 세션에 접근해 판단하는 시간이 더욱 오래 걸릴 것 같은데... 이러한 의심이 생겼고, 교수님께 질문드렸다.

 

답변은 생각보다 싱거웠지만, 너무 쉬운 방법이었다. 바로 url string query를 사용하는 것!

로그인 페이지로 납치 할 때,  /login?path=/cart  등으로 쿼리문을 붙여주는 것이다.

 

 

> 코드

본격적으로 코드를 정리하기에 앞서 프로젝트 스펙을 말하자면

Express / Passport / Sequreize 를 사용하고 있으며, 로그인 여부는 미들웨어 처리해 주었다.

 

middleware 

// 로그인 여부 확인
exports.isLoggedIn = (req, res, next) => {
  // console.log(req)
  console.log(req.originalUrl)
  if (req.isAuthenticated()) {
    next();
  } else {
    // res.status(403).send('로그인 필요');
    req.session.msg = 'You should login';
    return res.redirect('/login?path='+req.originalUrl);
  }
};

 

view > login :: ajax 코드 보낼때 주의

  if(parmas.path){
      document.getElementById("loginForm").action += `?path=${parmas.path}`;
    }
    function getUrlParams() {
      let params = {};
      window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value; });
      return params;
    }

 

loginRouter > login

router.post('/', isNotLoggedIn, (req, res, next) => {
  console.log(req.query + "여기 가려다가 로그인했어요")
  ... // id pw 받아오기
  // passport/localStrategy.js 실행
  passport.authenticate('local-login', (authError, user, info) => { 
    if (authError) {
     ...
    }
    if (!user) {
      req.session.msg = info.message;
      return res.redirect('/login');
    }
    return req.login(user, (loginError) => {
      if (loginError) {
        console.error(loginError);
        return next(loginError);
      }
      return req.query.path ? res.redirect(req.query.path) : res.redirect('/home');
    });
  })(req, res, next);

});

  return req.query.path ? res.redirect(req.query.path) : res.redirect('/home');  

이 코드를 통해 request에 path 쿼리가 있는지 확인하고, 있으면 path에 저장된 시도한 페이지로 이동한다.

 

 

> 후기

사실 이런 방식은 많은 사이트들이 사용하고 있다. (특히 커머스쪽이 잘 쓰는 듯)

https://www.29cm.co.kr/member/login?redirect_uri=https%3A%2F%2Fwww.29cm.co.kr%2Forder%2Fcart

짠~ 이곳은 29cm. 이 쇼핑몰도 시도한 페이지를 query를 통해 나타내고 있다.

path만을 저장하는 내 방식과는 달리 전체 페이지 링크와, 정해진 변수 명을 사용하고 있다는게 특징이다.

 

로그인 관련 QnA를 계기로 사이트 url을 살펴보게 되었다.

https://www.29cm.co.kr/shop/category/list?category_large_code=268100100&category_medium_code=new

쿼리문을 보면 ajax를 어떻게 보냈을지, 서버에선 어떻게 처리하고 있을까 생각하는 맛이 있다. ㅎㅎ