Use vue-route's beforeEach to implement the navigation guard (verify login before routing jump) function

Such a requirement is commonly encountered on websites. Some verifications must be done before routing jumps, such as login verification (go to the login page if you are not logged in). Below I have brought you the use of vue-route's beforeEach to implement the navigation guard (verify login before route jump) function. Friends who are interested should take a look.

Do some verification before route jump, such as login Authentication (go to the login page without logging in) is a common requirement in websites. In this regard, beforeRouteUpdate provided by vue-route can easily implement navigation guards (navigation-guards).

The name navigation-guards sounds weird, but since the official document translates it this way, let’s call it that.

Let’s first excerpt the usage of beforeRouteUpdate in a document:

You can use router.beforeEach to register a global front guard:

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

When a navigation is triggered, the global front guard is called in the order of creation. Guards are parsed and executed asynchronously. At this time, the navigation is waiting until all guards are resolved.

Each guard method receives three parameters:

to: Route: the target routing object to be entered

from: Route: the current navigation The route that 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.

next(): Proceed to the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.

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

next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new navigation is started.

next(error): (2.4.0) If the parameter passed to next is an Error instance, the navigation will be terminated and the error will be passed to the callback registered by router.onError().

Make sure to call the next method, otherwise the hook will not be resolved.

Let’s write an example below. In the previous blog, our account page, including courses and orders, needs to determine whether you are logged in before jumping; if you are logged in, go to the login page. Jump to the homepage:

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Discuss issues related to readyState and status in Ajax

Comprehensive analysis of the $.Ajax() method Parameters (graphic tutorial)

Implementing file upload with progress bar based on Ajax technology

The above is the detailed content of Use vue-route's beforeEach to implement the navigation guard (verify login before routing jump) function. For more information, please follow other related articles on the PHP Chinese website!