How to use route navigation guard to implement permission control and route interception in uniapp

How to use route navigation guards to implement permission control and route interception in uniapp

When developing uniapp projects, we often encounter the need to control permissions on certain routes and interception requirements. In order to achieve this goal, we can make use of the route navigation guard function provided by uniapp. This article will introduce how to use route navigation guards to implement permission control and route interception in uniapp, and provide corresponding code examples.

1. Configuring the routing navigation guard

First, configure the routing navigation guard in the main.js file of the uniapp project. Through the beforeEach method of VueRouter, we can execute some custom code before each routing switch.

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'

router.beforeEach((to, from, next) => {
  // 在这里编写权限控制和路由拦截的逻辑
  next()
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2. Implementing permission control

In the beforeEach method, we can decide whether to allow access to a route based on the user's role or permissions. Here is a simple example, assuming we have two routes: /home represents the home page, and /admin represents the administrator page. Only administrators can access the /admin route.

router.beforeEach((to, from, next) => {
  // 获取用户角色或权限
  const userRole = getUserRole()
  
  // 判断是否是管理员页面，并且用户角色不是管理员
  if (to.path === '/admin' && userRole !== 'admin') {
    // 跳转到其他页面，比如登录页面
    next('/login') 
  } else {
    next()
  }
})

3. Implement route interception

In addition to permission control, we sometimes need to intercept certain routes. For example, when a user visits a page that requires payment, we can check whether the user has paid in the beforeEach method. If not, jump to the payment page.

router.beforeEach((to, from, next) => {
  // 判断是否是付费页面，并且用户未付费
  if (to.meta.requiresPayment && !hasPaid()) {
    // 跳转到付费页面
    next('/payment') 
  } else {
    next()
  }
})

4. Add meta information to routing configuration

In order to facilitate the implementation of permission control and route interception, we can add some customization to the routes that need to be controlled in the routing configuration. Meta information is used to identify whether the route requires permission control or interception.

// router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home'),
      meta: {
        requiresAuth: true, // 需要登录权限
        requiresPayment: true // 需要付费
      }
    },
    {
      path: '/admin',
      component: () => import('@/views/Admin'),
      meta: {
        requiresAuth: true,
        requiresAdmin: true // 需要管理员权限
      }
    }
  ]
})

export default router

5. Execute custom logic when routing switching

When a user accesses a route that requires permission control or interception, the beforeEach method will execute the corresponding Custom logic and decide whether to proceed with routing switching. If we need to interrupt route switching, we can call next(false) in the beforeEach method to cancel the route jump.

router.beforeEach((to, from, next) => {
  // 判断是否需要登录权限，如果需要且用户未登录，则跳转到登录页面
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login') 
  } else {
    next() // 继续路由切换
  }
})

To sum up, by using the route navigation guard function provided by uniapp, we can easily realize the functions of permission control and route interception. In the beforeEach method, we can write custom logic to determine the user role, payment status, etc., to decide whether to allow access to a certain route. This method is both flexible and reliable, and is suitable for permission control and route interception needs in most uniapp projects.

I hope the content of this article is helpful to you. If you have any questions or need further help, please feel free to contact me.

The above is the detailed content of How to use route navigation guard to implement permission control and route interception in uniapp. For more information, please follow other related articles on the PHP Chinese website!