Vue-Router: How to use route guards to protect routes?

Vue-Router: How to use route guards to protect routes?

In Vue.js development, Vue-Router is an important tool for front-end routing management. In addition to allowing us to easily implement page jumps and transition effects, Vue-Router also provides a route guard mechanism that allows us to perform some custom operations before and after route jumps, such as authentication and redirection. wait.

In order to better understand the use of routing guards, we will introduce them in three parts: global guards, route-exclusive guards and intra-component guards.

1. Global guard

Global guard is a guard that will be executed before and after every route jump in the entire application. We can register it through the method provided by Vue-Router. . There are three global guard methods, namely beforeEach, beforeResolve and afterEach.

In the main.js file, we can register through the following code:

import router from './router'

router.beforeEach((to, from, next) => {
  // 这里是你的自定义逻辑
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 重定向到登录页
  } else {
    next()
  }
})

router.beforeResolve((to, from, next) => {
  // 这里是你的自定义逻辑
  next()
})

router.afterEach(() => {
  // 这里是你的自定义逻辑
})

In the beforeEach method, we can make authentication judgments based on the actual situation. If The user is not logged in and the target route requires login permissions. We can redirect the user to the login page through next('/login').

beforeResolveThe method is called after the route is resolved, and some asynchronous operations can be performed in this method. The

afterEach method is called after the routing jump is completed and can be used to perform some global cleanup operations.

2. Route exclusive guard

Route exclusive guard is configured for a specific route and will only take effect in that route. We can use the beforeEnter attribute in the routing configuration to register.

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 这里是你的自定义逻辑
    if (!isAdmin()) {
      next('/access-denied') // 重定向到访问拒绝页
    } else {
      next()
    }
  }
}

In the routing exclusive guard, we can make logical judgments based on actual needs, such as checking whether the user has administrator rights. If not, redirect to the access denial page.

3. In-component guards

In addition to global guards and route-exclusive guards, Vue-Router also provides guards within the component for routing hops within the component. Turn operation. Guards within the component include beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave.

export default {
  beforeRouteEnter (to, from, next) {
    // 这里是你的自定义逻辑
    if (!isAuthenticated()) {
      next('/login') // 重定向到登录页
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  }
}

In the guard within the component, we can perform some custom operations according to actual needs, such as checking whether the user is logged in, and if not, redirecting to the login page.

Summary:

Through the above three methods, we can use route guards to protect routes and implement some customized operations, such as authentication, redirection, etc. Depending on the needs, we can select the appropriate guard type for configuration to achieve more flexible and maintainable routing management. In actual development, we can use these guards reasonably according to specific needs and business scenarios to improve application security and user experience.

The above is the detailed content of Vue-Router: How to use route guards to protect routes?. For more information, please follow other related articles on the PHP Chinese website!