네비게이션 가드란
네비게이션 가드(Navigation Guard)란 프론트엔드 프레임워크인 Vue.js에서 라우팅 기능을 사용할 때, 페이지를 이동하기 전에 실행되는 미들웨어 함수입니다. 네비게이션 가드를 사용하면 페이지 이동 전에 특정 조건을 검사하고, 조건에 따라 페이지 이동을 허용하거나 중단시킬 수 있습니다.
네비게이션 가드는 Vue.js에서 제공하는 라우터 객체에서 사용할 수 있습니다. Vue.js에서는 네비게이션 가드를 전역 가드, 라우트 가드, 컴포넌트 가드로 구분할 수 있습니다.
전역 가드(Global Guard): 모든 라우트에 적용되는 가드로, Vue 인스턴스 생성 전에 라우터 객체에서 beforeEach 메서드를 사용하여 등록할 수 있습니다.
라우트 가드(Route Guard): 특정 라우트에 적용되는 가드로, Vue 인스턴스 생성 후에 라우터 객체에서 beforeEnter 메서드를 사용하여 등록할 수 있습니다.
컴포넌트 가드(Component Guard): 특정 컴포넌트에 적용되는 가드로, 컴포넌트 내에서 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 등의 라이프사이클 훅을 사용하여 구현할 수 있습니다.
네비게이션 가드는 주로 인증(Authentication)이나 권한(Authorization) 검사, 데이터 로딩 등의 용도로 사용됩니다. 예를 들어, 사용자가 로그인하지 않은 상태에서 보호된 페이지로 이동하려고 할 때, 네비게이션 가드를 사용하여 로그인 여부를 검사하고 로그인하지 않은 경우 로그인 페이지로 리디렉션할 수 있습니다.
결국 beforeEach가 인스턴스 생성전에 실행되는 문제였고 인스턴스 생성 후에 실행되는 beforEnter를 사용하면 해결됨
해결될줄 알았으나 안됨 ㅎ
새로고침으로 createApp으로 dispatch부터 시켜서 로그인 상태 true로 되는건 맞음
but 이전에 생성된 인스턴스로 인해서 로그인 상태가 false인 값을 받아오는것... 새로 생성된 인스턴스를 왜 바로 받아오질 못하니...
현재 문제 새로고침->네비가드->store의 액션 순으로 동작하는것...
새로고침->store의 액션->네비가드 순으로 동작하도록 고쳐야 한다.
다음 순서로 동작하도록 코드를 짜봐. main.js와 store, route는 각각 다른 폴더에 존재한다. 1. main.js에서 새로고침시 createApp을 할때 beforeCreate를 통해서 store.dispatch를 작동시킨다. 2. store에서 dispatch를 통해 actions를 작동시켜서 mutation을 통해 state의 isLogin값을 true로 변화시킨 뒤 그 값을 getters에 저장한다. 3. route에 있는 beforeEnter에서 getters를 통해 isLogin true값을 받아와서 마이페이지에 입장하도록 한다.
라우트 가드에 async를 걸고 내부에 store.dispatch에 await를 거니까 순서문제는 해결됐는데.. 이러면 라우트가드 걸리는 페이지에서 새로고침하면 dispatch를 두번 하게 되니까 코드 낭비가 일어남.. 그런데 일단 문제는 해결됐으니 일단은 이대로 간다...
