Vue-Router - 라우터 네비게이션 가드

네비게이션 가드란

---

네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 뜻한다.

예를 들면, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하도록 차단할 때 사용하는 기술이다.

네비게이션 가드 종류

---

네비게이션 가드의 종류는 다음과 같이 3가지가 존재한다.

• 애플리케이션 전역에서 동작하는 전역 가드
• 특정 URL에서만 동작하는 라우터 가드
• 라우터 컴포넌트 안에 정의하는 컴포넌트 가드
  

전역 가드

---

전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있다.

전역 가드의 설정 방법을 알아보자.

가장 먼저 라우터 인스턴스를 생성한다.

const router = new VueRouter();

router 변수에 다음과 같이 beforeEach() API를 호출한다.

router.beforeEach(function (to, from, next) {
    // to : 이동할 URL 정보가 담긴 라우터 객체
    // from : 현재 URL 정보가 담긴 라우터 객체
    // next : to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수
});

beforeEach() API는 3개의 인자를 받는다.

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

beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다.

원래 URL이 변경되고 나면 해당 URL에 따라 화면이 자연스레 전환되어야 하는데, 전역 가드를 설정했기 때문에 화면이 전환되지 않는다.

여기서 해당 URL로 라우팅하기 위해서는 next()를 호출해야한다.

next()가 호출되기 전까지 화면이 전환되지 않는다는 것에 주의해야한다.

전역 가드 예제

---

전역 가드 예제를 만들기 위해 다음과 같이 파일들을 생성하고, 코드를 작성해보자.

(vue-router는 외부 라이브러리이므로 npm이나 cdn을 통해 패키지를 직접 다운받아야 사용할 수 있다.)

router.js

Login.vue

Home.vue

main.js

위의 애플리케이션을 실행하면 아래와 같은 웹 애플리케이션이 된다.

로그인 메뉴와 홈 메뉴를 클릭하면 각각 화면에 맞는 컴포넌트가 표현된다.

여기서 전역 가드를 설정하는 코드를 추가해보자.

router.js

다시 애플리케이션을 실행하고 작업해보면 '/login' URL이나 '/home' URL로 라우팅(이동)되지 않고 클릭 횟수에 맞게 로그만 출력되는 것을 알 수 있다.

전역 가드가 작동하는 상태에서 URL 라우팅(이동)이 동작하도록 하고 싶다면 next()를 사용하면 된다.

beforeEach()의 to, from, next를 디버그 로그로 찍어보면 다음과 같은 내용을 확인할 수 있다.

to는 이동할 대상 URL 정보를 담고 있는 객체이다.

from은 현재 URL 정보를 담고 있는 객체이다.

next는 to의 정보를 대상으로 이동하기 위한 함수이다.

전역 가드로 페이지 인증하기

---

전역 가드를 실제 애플리케이션 운영에 적용시키는 방법을 알아보자.

예를 들어, 로그인이라는 기능을 구현하고, 로그인을 했을 때 접근할 수 있는 페이지와 로그인하지 않고 접근할 수 있는 페이지가 있다고 가정해보자.

[조건]

 - 로그인을 하지 않은 상태에서 로그인 수행을 위해 로그인 화면은 사용자가 접근할 수 있도록 허용해야한다.

 - 반대로, 로그인을 수행하지 않으면 내가 만든 웹 애플리케이션의 기능을 사용할 수 없도록 차단해야 하므로 홈 화면으로의 접근을 차단해야 한다.

위의 조건을 만족하도록 전역 네비게이션 가드 예제를 작성해보자.

router.js에서 라우트에 meta 속성을 정의하고 authRequired라는 사용자 정의 속성(내가 필요에 의해 만든 속성 값) 객체를 할당하자.

그리고 그 아래에 beforeEach를 작성했던 내용을 수정하자.

이동하려는 URL 정보(to)에서 meta 속성의 authRequired가 false면 라우팅 이동을 허용하고, true면 라우팅 이동을 차단하며 로그인을 시도하라는 내용을 전달한다.

위의 코드는 이동하려는 페이지에 로그인 인증 정보가 필요하면 경고창을 띄우고 라우팅을 차단하는 코드이다.

위 if문에 사용된 .some() 함수는 자바스크립트의 내장 API다. 지정된 배열의 모든 요소를 검사하여 조건을 만족시키면 true 값을 반환하고, 아니면 false 값을 반환한다. 위의 조건문의 내용은 다음과 같다. matched 배열 안에 meta속성이 있으면, authRequired의 속성의 값을 리턴하라는 내용이다. 그리고 이후 검증할 요소들이 있더라도 진행을 중지한다. (forEach문과 다른 부분)

위의 코드를 실행시켜보면 아래와 같다.

로그인 페이지를 클릭하면 로그인을 진행할 수 있도록 라우팅을 연결해주고, 

홈페이지를 클릭하면 로그인을 하라는 경고 알림과 함께 라우팅을 차단한다.

라우터 가드

---

전체 라우팅이 아니라 특정 라우팅에 대해서 가드를 설정하는 방식이다.

설정 방법은 다음과 같다.

컴포넌트 가드

---

라우터로 지정된 특정 컴포넌트에 가드를 설정하는 방식이다.

컴포넌트 단위로, 스크립트에 작성한다는 것이 특징이다.

설정 방법은 다음과 같다.

참고 - 

https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/