Example of method of routing permission management vue2/vue3

1. There are generally two ways to control Vue routing permissions

a. Routing meta information (meta)
b. Dynamic loading menu and route (addRoutes)

2. Routing meta information (meta) for routing permission control

2.1 Implementation in vue2

If a website has different roles, such as administrators and ordinary users, the pages that require different roles to access are different.

At this time, we can put all pages in the routing table, just judge the role permissions when accessing. If you have permission, you will be allowed to access. If you don't have permission, you will be denied access and jump to page 404

vue-router provides the meta-information meta configuration interface when building routes. We can add the corresponding permissions for the route in the meta-information, and then check the relevant permissions in the route guard to control the route jump.

The roles that can access the route can be added to roles in the meta property of each route. After each login, the user returns the user's role. Then when accessing the page, compare the meta attribute of the route with the user's role. If the user's role is in the routed roles, it is accessible, and if it is not there, access will be denied.

The following is how vue2 is implemented:

import VueRouter from 'vue-router';
(VueRouter)
...
routes: [
  {
    path: '/login',
    name: 'login',
    meta: {
      roles: ['admin', 'user']
    },
    component: () => import('../components/')
  },
  {
    path: 'home',
    name: 'home',
    meta: {
      roles: ['admin']
    },
    component: () => import('../views/')
  },
]

const router = new VueRouter({
  routes
})

export default router

Introduced under the file, register the global route guard

//Suppose there are two roles: admin and user//User role obtained from the backgroundconst role = 'user'
// When entering a page, the navigation guard event will be triggered.((to,from,next)=>{
  if((role)){
   next() //Released  }esle{
   next({path:"/404"}) //Skip to page 404  }
})

Since then, the permission control of the route has been basically completed

Off topic In the routing guard, the business needs that cannot match the route to 404 page can also be solved well, and the following implementation is as follows:

import router from ‘./router‘
((to, from, next) => {
   // ...
    if ( === 0) {
        next('/404')
    } else {
        next()
    }
    //(to, from, next, 'Route Guard')})

2.2 Implementation in vue 3

In fact, the ideas are similar, but you should note that there are some subtle differences between the way of using routing in vue3 and vue2. I used a simpler 404 to create an instance of vue3. Regarding the routing permission control of vue3, you can follow the following code to match the following code:

Create a route:

import { createRouter, createWebHashHistory } from 'vue-router';
...
routes: [
  {
    path: '/login',
    name: 'login',
    meta: {
      roles: ['admin', 'user']
    },
    component: () => import('../components/')
  },
  {
    path: 'home',
    name: 'home',
    meta: {
      roles: ['admin']
    },
    component: () => import('../views/')
  },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})
export default router;

Router Guard (Global Registration in it):

import {
    useRouter
} from 'vue-router';
export default {
    name: 'App',
    setup() {
        const router = useRouter();
        ((to, from, next) => {
            // ...
            if ( === 0) {
                next('/404')
            } else {
                next()
            }
        })
    }
}

4. Dynamic load menus and routes (addRoutes)

Dynamically add menus and routing tables based on user permissions or user attributes, and customize the user's functions. vue-router provides the addRoutes() method, which can dynamically register routes. It should be noted that dynamically add routes are pushed in the routing table. Since the routes are matched in order, routes such as 404 pages need to be placed at the end of dynamic addition

5. Summary

Whether it is vue2 or vue3, the implementation ideas are actually similar, but the details of using the interface will be slightly different. For us, the focus of learning must not be on a certain framework, but to train our own thinking.

This is the article about vue2/vue3 routing permission management. For more related vue routing permission management content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!