로그인 유무에 따른 네비게이션 가드

[hackjap]

네비게이션 가드

시나리오

로그인 유무에 따라서 보여줘야 하는 페이지를 설정하기 위해 네비게이션 가드를 설정하겠습니다.

• 먼저 router/ index.js 에가서 router 변수를 전역변수로 만들고 export가 되어있는지 확인합니다.

• 이렇게 각 라우터페이지에 네비게이션 가드를 설정할 수 있지만, 효율적인 사용을 위해 라우터 전역변수에 설정하겠습니다.

• 필요한 page에만 상황에 맞게 적절한 meta 데이터를 설정해주어 아래 if(분기문)을 통해 추가적인 조건과 함께 설정해줍니다.
• 지난 시간에 isLogin이라는 getters 함수를 통해 로그인 유무를 판별합니다. ( state의 토큰 값을 계속 체크하는 bollean 함수 )

결과

• 다음과 같이 우측에 로그인 상태일 시, 상품등록 페이지에 들어가지는 것을 볼 수 있습니다.