λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œ

λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œλŠ” μ‚¬μš©μžμ˜ κΆŒν•œμ— 따라 νŽ˜μ΄μ§€ 접근을 λ§‰κ±°λ‚˜ νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•˜κΈ° 전에 데이터λ₯Ό 미리 뢈러올 λ•Œ μ‚¬μš©ν•˜κΈ° 쒋은 κΈ°μˆ μž…λ‹ˆλ‹€. 사싀상 μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬ν˜„ν•  λ•ŒλŠ” 거의 ν•„μˆ˜λ‘œ κ΅¬ν˜„ν•΄μ•Ό ν•©λ‹ˆλ‹€.

λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œ μ’…λ₯˜

λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œ μ’…λ₯˜λŠ” μ „μ—­, 지역, μ»΄ν¬λ„ŒνŠΈ 3가지가 μžˆμŠ΅λ‹ˆλ‹€. 주둜 μ‚¬μš©λ˜λŠ” μ „μ—­κ³Ό 지역 λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

λ„€λΉ„κ²Œμ΄μ…˜ μ „μ—­ κ°€λ“œ

μ „μ—­ κ°€λ“œλ₯Ό μ„€μ •ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

var router = new VueRouter();

router.beforeEach(function(to, from, next) {
  // ...
});

λ·° λΌμš°ν„° μΈμŠ€ν„΄μŠ€λ₯Ό ν•˜λ‚˜ μƒμ„±ν•˜κ³  ν•΄λ‹Ή μΈμŠ€ν„΄μŠ€λ₯Ό μ°Έμ‘°ν•˜λŠ” λ³€μˆ˜μ— beforeEach() APIλ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€. 인자둜 받은 3개의 λ³€μˆ˜λŠ” λ‹€μŒκ³Ό 같은 역할을 ν•©λ‹ˆλ‹€.

  • to : 이동할 url
  • from : ν˜„μž¬ url
  • next : toμ—μ„œ μ§€μ •ν•œ url둜 μ΄λ™ν•˜κΈ° μœ„ν•΄ κΌ­ ν˜ΈμΆœν•΄μ•Ό ν•˜λŠ” ν•¨μˆ˜

λ„€λΉ„κ²Œμ΄μ…˜ 지역 κ°€λ“œ

λΌμš°νŒ… λ‘œμ§μ— λ”°λΌμ„œ λ•Œλ‘œλŠ” 지역과 전역을 μ„žμ–΄μ„œ μ‚¬μš©ν•΄μ•Ό ν•  λ•Œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 지역 κ°€λ“œλŠ” μ•„λž˜μ™€ 같이 κ΅¬ν˜„ν•©λ‹ˆλ‹€.

var router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: function(to, from, next) {
        // 인증 κ°’ 검증 둜직 μΆ”κ°€
      }
    }
  ]
})

beforeEnter()의 인자 3κ°œλŠ” μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ λ‚΄μš©κ³Ό λ™μΌν•©λ‹ˆλ‹€.

λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œλ‘œ 인증 정보 확인

λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œκ°€ κ°€μž₯ 많이 μ“°μ΄λŠ” 곳은 μ‚¬μš©μž 인증 정보에 따라 접근을 λ§‰λŠ” λ‘œμ§μž…λ‹ˆλ‹€.

router.beforeEach(function(to, from, next) {
  // to: 이동할 url에 ν•΄λ‹Ήν•˜λŠ” λΌμš°νŒ… 객체
  if (to.matched.some(function(routeInfo) {
    return routeInfo.meta.authRequired;
  })) {
    // 이동할 νŽ˜μ΄μ§€μ— 인증 정보가 ν•„μš”ν•˜λ©΄ κ²½κ³  창을 λ„μš°κ³  νŽ˜μ΄μ§€ μ „ν™˜μ€ ν•˜μ§€ μ•ŠμŒ
    alert('Login Please!');
  } else {
    console.log("routing success : '" + to.path + "'");
    next(); // νŽ˜μ΄μ§€ μ „ν™˜
  };
});