VueJS

All about guards in VueJS

All about guards in VueJS

Tính đến hôm nay mình lại nhận được một thông báo nữa từ công ty mình đang làm việc. Đó là sẽ lại cho các nhân viên nghỉ đến gần hết tháng 4, có thể với cái tình hình này thì đến tháng 5 mình mới được đến công ty. Các bạn sinh viên thì không biết đến bao giờ mới đi học trở lại, nhưng chắc phải sang tháng 6, …. Nhưng dù như thế nào thì thời gian vẫn cứ trôi ….

1. Mở đầu

Như các bạn đã biết thì trong Angular 2+ có canActive còn trong React thì ta có thể check điều kiện mà từ đó render ra Router rồi từ đó render tiếp ra Component. Và với VueJS ta sẽ có Vue router – một thư viện điều hướng, ta cũng có cách để Guard các phần theo cách riêng mà theo bản thân mình đánh giá là nó dễ triển khai hơn và dễ hiểu hơn ^^

2. Chi tiết

Guard trong VueJS được chia làm ba phần chính là: Global Guards được gọi khi bất kì một Navigation nào được triggered hay các bạn cũng có thể hiểu là khi mà bất kì URLs change, Per Route Guards được gọi khi mà các phần route được gắn lắng nghe thay đổi – Đây là phần config bên trong từng phần route nhỏ một, Component Guards được gọi khi mà component bên trong Route được tạo, update hoặc destroy.


Global Guards

Được định nghĩa ở Global – ở phần route của toàn bộ hệ thống.

  • beforeEach: Được hoạt động trước khi mà bất kì route nào được hoạt động.
  • beforeResolve: Được hoạt động trước khi sự điều hướng của chúng ta được xác nhận, nhưng lại sau beforeRouteLeave của Component Guards.
  • afterEach: Được gọi sau khi mà route resolves – ở đây ta không thể handle điều hướng được nữa, vì nó đã resolves cả rồi.
const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  /* must call `next` */
})

router.beforeResolve((to, from, next) => {
  /* must call `next` */
})

router.afterEach((to, from) => {})

Per Route Guards

Được định nghĩa trong phần config route cụ thể.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        /* must call `next` */
        // ...
      }
    }
  ]
})
  • beforeEnter: Được hoạt động trước beforeRouteEnter  bên trong Component Guards

Component Guards

  • beforeRouteEnter: Được chạy trước khi mà điều hướng được xác nhận và trước cả khi mà component được create.
  • beforeRouteUpdate: Route mới được call và Component này được dùng lại.
  • beforeRouteLeave: Được gọi trước khi mà chúng ta chuyển khỏi component này. Hay dùng nhất có lẽ là khi ta muốn hỏi lại Use xem có muốn leave khỏi component này khi mà chưa save data không ^^
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    /* must call `next` */
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

Sau đây là thứ tự mà chúng ta có thể xem để hiểu nhiều hơn về Guard:

  1. Sự kiện điều hướng được tạo.
  2. beforeRouteLeave guards bên trong guards components được gọi.
  3. beforeEach ở guards global được gọi.
  4. beforeRouteUpdate guards bên trong guards components.
  5. beforeEnter được gọi trong route configs.
  6. Tiền trình chạy xử lí route component.
  7. beforeRouteEnter được gọi khi component được khởi tạo.
  8. beforeResolve guards được gọi ở Global.
  9. Điều hướng được xác nhận.
  10. afterEach ở Global được call.
  11. DOM updates được chạy.
  12. Callback next bên trong guard component được chạy.

3. Kết luận

Như vậy, các bạn có thể thấy việc hiểu và dùng tốt Guard router là rất quan trọng. Nó sẽ giúp bạn hiểu dự án hơn, được phân những task khó về mặt kĩ thuật và từ đó thử thách bản thân mình được nhiều hơn.

4. Tham khảo

# Vue Router for Everyone
# The Vue.js Master Class
# Navigation Guards
# Protecting Vue Routes with Navigation Guards
# Router Construction Options

Tagged , , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
NoName
NoName
7 months ago

Cố lên bạn!!