λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ“  archive

Vue-router λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œ ν™œμš©ν•˜κΈ°

by HandHand 2021. 3. 1.

πŸ“Œ Navigation Guard?

μ „μ—­ κ°€λ“œ

router.beforeEach λ₯Ό μ‚¬μš©ν•΄μ„œ λͺ¨λ“  λΌμš°ν„° 객체에 κ°€λ“œλ₯Ό μ μš©ν•©λ‹ˆλ‹€.

λ”°λΌμ„œ λ„€λΉ„κ²Œμ΄μ…˜μ΄ 트리거 될 λ•Œλ§ˆλ‹€ μ–΄λ–€ λΌμš°νŠΈκ°€ λ°œμƒν–ˆλŠ”μ§€ μ•Œ ν•„μš”κ°€ μžˆλŠ”λ° 이λ₯Ό μœ„ν•΄ λ‹€μŒ μ„Έ 가지 인자λ₯Ό μ „λ‹¬λ°›μŠ΅λ‹ˆλ‹€.

  • to : to 에 ν•΄λ‹Ήν•˜λŠ” 라우트 객체둜 λ‹€μŒμ— 이동
  • from : ν˜„μž¬ λΌμš°ν„°λ‘œ 였기 μ΄μ „μ˜ 라우트
  • next : 훅을 ν•΄κ²°ν•˜κΈ° μœ„ν•΄ ν˜ΈμΆœλ©λ‹ˆλ‹€. λ™μž‘ 방식은 next 에 μ „λ‹¬ν•˜λŠ” μΈμžμ— 따라 λ‹¬λΌμ§‘λ‹ˆλ‹€.


next() ν•¨μˆ˜μ˜ 경우 ν˜ΈμΆœλ˜μ§€ μ•ŠμœΌλ©΄ 훅이 μ ˆλŒ€ λΆˆλŸ¬μ§€μ§€ μ•ŠμœΌλ―€λ‘œ λ°˜λ“œμ‹œ κ°€λ“œ λ‚΄μ—μ„œ ν˜ΈμΆœν•΄μ•Όν•©λ‹ˆλ‹€.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

라우트 별 κ°€λ“œ

beforeEnter λ₯Ό 라우트 객체에 직접 μ •μ˜ν•˜μ—¬ ν•΄λ‹Ή λΌμš°νŠΈκ°€ λ°œμƒν•˜κΈ° 이전에 μ›ν•˜λŠ” λ‘œμ§μ„ μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
    },
  ],
});

μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€ κ°€λ“œ

μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave μ„Έ κ°€μ§€λ‘œ λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œλ₯Ό μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

beforeRouteEnter λŠ” 아직 μ»΄ν¬λ„ŒνŠΈκ°€ λžœλ”λ§ λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ— this 객체에 μ ‘κ·Όν•  수 μ—†μ§€λ§Œ λ‚˜λ¨Έμ§€ 두 κ°œλŠ” 접근이 κ°€λŠ₯ν•©λ‹ˆλ‹€.

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // ...
  },
  beforeRouteUpdate(to, from, next) {
    // ...
  },
  beforeRouteLeave(to, from, next) {
    // ...
  },
};

ν•˜μ§€λ§Œ next ν•¨μˆ˜μ— 콜백 ν•¨μˆ˜λ₯Ό 지정할 경우 μ½œλ°±μ— μ „λ‹¬λ°›λŠ” 인자둜 μ»΄ν¬λ„ŒνŠΈ μΈμŠ€ν„΄μŠ€μ— μ ‘κ·Όν•˜μ—¬ this 에 직접 μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.

beforeRouteEnter (to, from, next) {
  next(vm => {
    // `vm`을 ν†΅ν•œ μ»΄ν¬λ„ŒνŠΈ μΈμŠ€ν„΄μŠ€ μ ‘κ·Ό
  })
}

 

πŸ“Œ beforeEnterλ₯Ό ν†΅ν•œ 라우트 별 κΆŒν•œ 체크

이번 ν¬μŠ€νŒ…μ—μ„œλŠ” 라우트 객체 내뢀에 λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œλ₯Ό μ„€μ •ν•˜μ—¬ μ‚¬μš©μž κΆŒν•œμ„ μ²΄ν¬ν•΄μ€¬μŠ΅λ‹ˆλ‹€.

λ§Œμ•½ μ‚¬μš©μžκ°€ μƒν’ˆ κ²Œμ‹œκΈ€ 생성 νŽ˜μ΄μ§€μ— λ‘œκ·ΈμΈμ„ μ•ˆν•œ μƒνƒœμ—μ„œ μ ‘κ·Όν•˜μ—¬κ³  ν•œλ‹€λ©΄ alert 둜 μ•ŒλžŒμ„ λ„μ›Œμ€€ λ’€ ν™ˆ ν™”λ©΄μœΌλ‘œ λ¦¬λ‹€μ΄λ ‰νŠΈ ν•©λ‹ˆλ‹€.

routes/index.js

// import components
// ...

// import store for navigation gurad
import store from "../store/index";

export const router = new VueRouter({
  routes: [
    // ...
    {
      // μƒν’ˆ κ²Œμ‹œκΈ€ 생성 νŽ˜μ΄μ§€
      path: "/product/new",
      component: ProductCreateView,
      beforeEnter: (to, from, next) => {
        // λ§Œμ•½ 둜그인 μƒνƒœλΌλ©΄
        if (store.state.email !== "" && store.state.token !== "") {
          return next();
        }
        alert("둜그인이 ν•„μš”ν•œ μ„œλΉ„μŠ€μž…λ‹ˆλ‹€.");
        next("/");
      },
    },
  ],
});

 

 

πŸ“Œ μ°Έκ³  자료

λ°˜μ‘ν˜•

πŸ’¬ λŒ“κΈ€