Navigation Guard
- Vue router를 통해 특정 URL에 접근 할 때, 특정 조건을 검사하거나 인증을 수행하여 허용되지 않은 경로로의 접근을 막을 수 있다.
- 네비게이션 가드는 컴포넌트 내부에서도 정의할 수 있으며, 이를 이용하여 특정 라우터에서의 접근 제어나 다른 동작을 수행할 수 있다.
전역 가드
- 다른 url주소로 이동할 때(모든 라우팅 전) 항상 실행되며, 네트워크 요청이나 사용자 인증 정보 등을 검사하여 해당 사용자가 액세스할 권한이 있는 페이지로만 이동하게 한다.
- 애플리케이션의 전역에서 라우팅 네비게이션을 관리하는 방법 중 하나이며, router/index.js에 router.beforeEach() 메서드를 이용하여 전역 가드를 구현할 수 있다.
- to 객체: 이동하려는 URL 정보를 담고 있는 라우팅 객체
- from 객체: 이전 URL 정보를 담고 있는 라우팅 객체
- next 함수: 다음 라우팅 객체를 받아서 반드시 호출해야 한다. 만약 호출하지 않으면 다음 단계로 네비게이션을 진행하지 않는다.
Global Before Guard 실습
- /home으로 이동하더라도 라우팅이 되지 않고 아래와 같이 로그만 출력된다.
- next()가 호출되어야 화면이 전환된다.
- About으로 이동해보기
- to에는 이동 할 url인 about에 대한 정보가,
- from에는 현재 url인 home에 대한 정보가 들어있다.
Login 여부에 따른 라우팅 처리 실습
- Login이 되어 있지 않다면 Login 페이지로 이동하는 기능 추가
- LoginView에 대한 라우터 링크 추가
- Login해야만 접근할 수 있도로
- isLoggedIn이 true인 경우 결과
- /hello/harry에 해당하는 컴포넌트가 정상적으로 렌더링 된다.
- isLoggedIn이 false인 경우 결과
- /hello/harry에 해당하는 컴포넌트가 정상적으로 렌더링 되지 않고 Login 페이지로 이동된다.
- Logindㅡ로 이동했는데 console창에 log가 2개 찍히는 이유
- 첫번째 출력은 /hello/harry로 접속 시도 후(전역 가드에 막힘)
전역 가드에서 login으로 이동 요청 할 때 출력- 두번째 출력은 /login으로 이동 요청 할 때 출력
라우터 가드
- 전체 route가 아닌 특정 route에 대해서만 가드를 설정하고 싶을 때 사용한다.
beforeEnter()
- 특정 라우팅에 접근하기 전에 실행되는 함수이다
- 라우터를 등록한 위치에 추가한다. 단 매개변수, 쿼리, 해시 값이 변경될 때는 실행하지 않고 다른 경로에서 탐색할 때만 실행된다.
- 콜백함수는 to, from, next를 인자로 받는다.
라우터 가드 실습
- 이미 로그인 되어있는 경우 HomeView로 이동하게 하기
- 로그인 여부에 대한 임시 변수 생성
- isLoggedIn = true인 경우(로그인 상태인 경우)
- /login으로 접속을 시도하면 Home으로 이동
- Login을 제외한 다른 페이지로 이동하면 라우터 가드를 따로 설정해주지 않았기 때문에 라우터 가드가 동작하지 않는다.
- 이렇게 특정 라우트만 따로 가드를 하고 싶은 경우에는 라우터 가드를 사용한다.
컴포넌트 가드
- 특정 컴포넌트 내에서 가드를 지정하고 싶을 때 사용한다.
- beforeRouteUpdate()
- 해당 컴포넌트를 렌더링하는 경로가 변경될 때 실행
Params변화 감지
- about에서 jun에게 인사하는 페이지로 이동
- navbar에 있는 Hello를 눌러 harry에게 인사하는 페이지로 이동
- URL은 변하지만 페이지는 변화하지 않는다.
- 변화하지 않는 이유
- 컴포넌트가 재사용 되었기 때문이다.
- 기존 컴포넌트를 지우고 새로 만드는 것보다 효율적이다.
- Params변화 감지 문제 해결
- beforeRouteUpdate()를 사용해서 처리 가능
- userName을 이동할 params에 있는 userName으로 재할당
404 NOT FOUND
요청한 리소스가 존재하지 않는 경우
- 사용자가 요청한 리소스가 존재하지 않을 때 응답
- 모든 경로에 대해서 404page로 redirect 시키기
- 기존에 명시한 경로가 아닌 모든 경로가 404page로 redirect된다.
- 이때, routesd에 최하단부에 작성해야 한다.
형식은 유효하지만 특정 리소스를 찾을 수 없는 경우
- 예를들어, Django에게 articles/1/로 요청을 보냈지만, 1번 게시글이 삭제된 상태
- 이때는 path: '*'를 만나 404page가 렌더링 되는 것이 아니라 기존에 명시한 articles/:id/에 대한 components가 렌더링된다.
- 하지만 데이터가 존재하지 않기 때문에 정상적으로 렌더링이 되지 않는다.
- 이러한 문제를 해결하기 위해서
- 데이터가 없음을 명시해야한다.
- 404page로 이동해야 한다.
다크모드가 보기 좋아요