Route guard

What is routing guard?

Route guard is the verification of route jump, such as login authentication (you can’t enter the personal center page without login), etc
Route guards are divided into three categories:

1. Global guard: front guard: before each, rear hook: after each

2. Single route guard: exclusive guard: beforeenter

3. Internal guard of components: beforerouteenter beforerouteupdate beforerouteleave
All routing guards have three parameters:

To: destination route to enter (where to go)

From: route to leave (from where)

Next: whether to proceed to the next step (continue or not)

🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️🤷‍♂️

Writing next () is equivalent to next (true) continuing execution

Not writing is equivalent to terminating execution with next (false)

Next (path) jump, for example: next (“/ login”)

Note: there is no next parameter for aftereach of the post hook
Let’s take a detailed look at how they are used
Global guard:

1. Global front guard beforeach:

Add: meta: {permission: true} to the route to be guarded,

router.beforeEach((to, from, next) => {
  if (to.meta.permission) {
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      Alert ("please login first");
      next("/login");
    }
  } else {
    next();
  }
});

2. Global post hook aftereach (less used)

router.afterEach((to, from) => {
  // to and from are both route objects.
});

Single route guard:

//Home module routing
  {
    path: "/index",
    name: "index",
    meta: { permission: true },
    component: () => import("../views/Index.vue"),
    beforeEnter: function(to, from, next) {
      if (sessionStorage.getItem("token")) {
        next();
      } else {
        Alert ("please login first");
        next("/login");
      }
    }
  },

Internal guard of components:

anddata、created、mounted、methodsOn an equal footing

usebeforeRouteEnterFor example:

beforeRouteEnter(to, from, next) {
    //Called before the corresponding route rendering this component is confirmed
    //No! Yes! Get component instance ` this`
    //Because the component instance has not been created before the guard executes
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      Alert ("please login first");
      next("/login");
    }
  },
  beforeRouteUpdate(to, from, next) {
    //Called when the current route changes but the component is reused
    //Can access component instance ` this`
  },
  beforeRouteLeave(to, from, next) {
    //Called when the navigation leaves the corresponding route of the component
    //Can access component instance ` this`
  },

Beforerouteenter is before entering

Beforerouteupdate is when the route changes

Beforeroutleave is after leaving. This guard is usually used to prevent the user from leaving suddenly before saving. The navigation can be cancelled by next (false).

be careful:
Beforerouteenter guard cannot access this because the guard is called before navigation confirmation, so the new component to be launched has not been created.
Complete navigation analysis process

Navigation is triggered.
Called in an inactive componentbeforeRouteLeave Guard.
Call the global beforeeach guard.
Call beforerouteupdate guard (2.2 +) in the reused component.
Call beforeenter in the routing configuration.
Resolve asynchronous routing components.
Call beforerouteenter in the activated component.
Call the global beforeresolve guard (2.5 +).
Navigation confirmed.
Call the global aftereach hook.
Trigger DOM update.
Call the callback function passed to next in beforerouteenter, and the created component instance will be passed in as the parameter of the callback function.