옹재
소소한 개발 블로그
옹재
전체 방문자
오늘
어제
  • 분류 전체보기 (66)
    • 개발 관련 서적 스터디 (6)
    • 프론트엔드 스터디 (36)
      • Javascript (16)
      • Typescript (13)
    • Vue 스터디 (22)
    • 개발 관련 스터디 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • scss
  • 프레임워크 없는 프론트엔드 개발
  • 개발서적 스터디
  • 프론트엔드 스터디

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
옹재

소소한 개발 블로그

Vue 스터디

Vue.js 라우터 네비게이션 가드

2021. 7. 15. 16:16
728x90
반응형

네비게이션 가드란?

네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 해 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다.

종류

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

전역 가드

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

먼저, 전역 가드 설정을 위해 라우터 인스턴스를 생성합니다.

var router = new VueRouter();

다음으로 beforeEach() API를 호출합니다.

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

beforeEach가 호출되면 해당 url로 바로 이동하지않고 대기 상태가 됩니다. 해당 url로 라우팅 하기 위해서는 next()를 꼭 호출해줘야 합니다. 그 전까지는 화면이 전환되지 않습니다.

라우터 가드

전체 라우팅이 아니라 특정 라우팅에 대해서 가드를 설정하는 방법입니다. 원리는 똑같지만 호출하는 API가 beforeEnter로 다르고 특정 라우팅에 대해서만 설정해주면 됩니다.

var router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: function(to, from, next) {
        // 인증 값 검증 로직 추가
      }
    }
  ]
})

컴포넌트 가드

라우터로 지정된 특정 컴포넌트에 가드를 설정하는 방법은 다음과 같습니다.

const Login = {
  template: '<p>Login Component</p>',
  beforeRouteEnter (to, from, next) {
    // Login 컴포넌트가 화면에 표시되기 전에 수행될 로직
    // Login 컴포넌트는 아직 생성되지 않은 시점
  },
  beforeRouteUpdate (to, from, next) {
    // 화면에 표시된 컴포넌트가 변경될 때 수행될 로직
    // `this`로 Login 컴포넌트를 접근할 수 있음
  },
  beforeRouteLeave (to, from, next) {
    // Login 컴포넌트를 화면에 표시한 url 값이 변경되기 직전의 로직
    // `this`로 Login 컴포넌트를 접근할 수 있음
  }
}
728x90
반응형

'Vue 스터디' 카테고리의 다른 글

Vue에서 virtual DOM은??  (0) 2021.07.16
Vue.js 에서 HOC(High Order Component) 만들기  (0) 2021.07.15
Nuxt.js에서 Axios 통신  (0) 2021.06.24
Nuxt.js 란?  (0) 2021.06.23
Vuex  (0) 2021.05.26
    'Vue 스터디' 카테고리의 다른 글
    • Vue에서 virtual DOM은??
    • Vue.js 에서 HOC(High Order Component) 만들기
    • Nuxt.js에서 Axios 통신
    • Nuxt.js 란?
    옹재
    옹재

    티스토리툴바