Specific use of routing guards in Vue

1. Global Guard

1.1 Global front guard
1.2 Global post-route guard
1.3 Integration

2. Router-specific guard

3. Guards within components

Function: Control the permissions of the route

Categories: Global guards, exclusive guards, component guards

1. Global Guard

1.1 Global front guard

As the name implies, the pre-guard is mainly to perform a series of operations based on your status before you jump the route (the global pre-guard is triggered before the route is initialized and jumped)

You can use router.beforeEach to register a global pre-guard (Each: each, that is, it will be triggered when any route jumps)

Each guard method receives three parameters:

to:Route : The route object that is about to enter the target

from:Route : The route that the current navigation is about to leave

next:function : This method must be called to resolve this hook. The execution effect depends on the calling parameters of the next method

1. next() : Go to the next hook in the pipeline (to). If the hook is executed, the navigation state is confirmed.

2. next(false) : interrupts the current navigation. If the browser's URL changes (perhaps manually by the user or by pressing the browser's back button), the address will be reset to the address corresponding to the from route.

3.next('/") or next({path:'/'}) : Jump to the same address. The current navigation is interrupted and then a new navigation is made. You can pass any object to next, and it allows you to set options such as replace:true, name:'home', and any options in router-link's to prop or router.push.

Make sure the next function is called exactly once in any given navigation guard. It can appear more than once, but only if all logic paths do not overlap, otherwise the hook will never be resolved or error out.

1.1.1 Usage

You can print out from, to, and next to see what information they will save.

Example

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
 
Vue.use(VueRouter)
 
const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: 'message', //Do not write: /news
        component: Message
      }
    ]
  },
  {
    path: '/about',
    name: 'aboutName',
    component: About,
    children: [{ //Configure child routing through children path: 'news', //Do not write here: /news
      component: News
    }]
  }
]
 
const router = new VueRouter({
  routes
})
 
//Global front routing guard---called at initialization and each time the route is switched router.beforeEach((to, from, next) => {
  console.log(to);
  //Here is a simple example //that is, to determine whether the user has entered a route that requires authentication (here the distance is news and message)
  if (to.path == '/home/message' || to.path === '/about/news') {
    //If you enter, then determine whether the information is cached locally (here simulates the login token)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  }else{
    //If not, just rest assured and call next()
  }
})
export default router

One shortcoming of the above example is that when there are many routes that need to be authenticated, do you need to judge them one by one? That is not necessary, so another attribute of the route is introduced here, namely meta, which can be configured in each route. It is generally used to identify the attributes with identification, and can be judged by force, as follows:

//Using meta
router.beforeEach((to, from, next) => {
  console.log(to);
  if (to.meta.isAuth) {//Judge whether authentication is requiredif (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  } else {
    next()
  }
})

1.2 Global post-route guard

//Global post-route guard --- called during initialization and after each route switch router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title || 'Routing jump example' //Modify the title of the web page
  }else{
    document.title = 'vue_test'
  }
})

1.3 Integration

2. Router-specific guard

You can define beforeEnter guards directly in the route configuration. These parameters are the same as the method parameters of the global before guard.

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

3. Guards within components

Finally, you can define route navigation guards directly inside your route component:

beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // Called before the corresponding route that renders this component is confirmed // No! able! Get the component instance `this`
    // Because the component instance has not been created before the guard is executed},
  beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is reused // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And this hook will be called in this case.
    // You can access the component instance `this`
  },
  beforeRouteLeave(to, from, next) {
    // Called when navigating away from the corresponding route of this component // You can access the component instance `this`
  }
}

This is the end of this article about the specific use of routing guards in Vue. For more relevant Vue routing guard content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of Vue router routing guard
Vue2.0 implements navigation guard (route guard)
Detailed explanation of Vue's hook functions (route navigation guards, keep-alive, life cycle hooks)
Detailed explanation of Vue's routing guard and keep-alive life cycle

<<: Three ways to implement animation in CSS3

>>: MySQL database architecture details