[Vue.js] 로그인 후 이전페이지로 되돌아가기

게시판 서비스 구현 중 글쓰기 페이지 이동시에 회원 로그인 여부를 확인하여
로그인하지 않은 경우 로그인 페이지로 이동을 시켰다

사용자가 로그인 페이지로 이동하여 로그인을 완료한 후,
로그인 하기 전 머물던 페이지로 이동하는 기능을 구현해보았다

[ vue 공식문서 ] router-네비게이션 가드

1. router 설정

전역에서 router를 설정하기 위해 router.beforeEach()를 호출한다
beforeEach()를 호출하면 다음과 같이 3개의 인자를 받는다

• to : 이동할 url 정보가 담긴 라우터 객체
• from : 현재 url 정보가 담긴 라우터 객체
• next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수

routes/index.js

...

router.beforeEach((to, from, next) => {
    console.log('to =>', to);
    console.log('from =>', from);
    
    // 로그인, 로그아웃 url 저장하지 않음
    if(to.path !== '/memberlogin' && to.path !== '/memberlogout' ){
        sessionStorage.setItem("CURR_URL", to.path);

        //object -> string로 변경 => JSON.stringify(변경할오브젝트)
        //string -> object로 변경 => JSON.parse(변경할문자)
        sessionStorage.setItem("CURR_QRY", JSON.stringify(to.query));
    }

    next();
});

...

2. 로그인 페이지에서 이전페이지로 돌아가기

member/CustomerItemPage.vue

글쓰기 페이지 이동전에 로그인 여부를 확인하고 그 결과에 따라 이동 페이지를 처리한다

• 로그인 한 경우 ⇒ 글쓰기 페이지로 바로 이동
• 로그인 하지 않은 경우 ⇒ alert + 로그인 페이지로 이동

        // 글쓰기 페이지로 이동 (이동전 로그인 여부 확인)
        const handleBoardWrite = () => {
            console.log('sessionStorage.getItem("token") => ', sessionStorage.getItem("token"));

            if(sessionStorage.getItem("token") == null) {
                alert('로그인이 필요한 서비스입니다!')
                router.push({path:'/memberlogin'});
            } else{
                router.push({path:'/boardwrite'});
            }
        }

이전페이지 이동 설정

• 글쓰기 페이지를 먼저 이동하고 로그인 여부를 확인하면
  ⇒ 로그인 후 돌아오는 페이지는 글쓰기 페이지

• 게시글 메인 페이지에서 로그인 여부를 확인하면
  ⇒ 로그인 후 돌아오는 페이지는 게시글 메인 페이지