This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

Vue Route Permission Management (VUE2 and VUE3)

1. The Vue route permission can be controlled in two ways

• A. Routing Meta Information
• B. Dynamically load menus and routes (addRoutes)

2 Meta information for route permission control

2.1 Implementation in VUE2

If a site has different roles, such as administrators and regular users, different roles are required to access different pages

At this point we can put all the pages in the routing table, as long as the role permissions are determined at the time of access. If you have permission to access, do not have permission to deny access, jump to the 404 page

The Vue-Router provides the meta configuration interface during route construction. We can add the permission corresponding to the route to the meta information, and then check the relevant permission in the route guard to control the route jump.

In the meta attribute of each route, add roles that have access to that route to their roles. Each time a user logs in, the user’s role is returned. Then, when accessing the page, the meta attribute of the route is compared to the role of the user. If the user’s role is in the role of the route, it is accessible. If the user is not in the role of the route, access is denied.

Here is how VUE2 is implemented:

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

export default router
Copy the code

Import under app.vue to register the global route guard

// Assume that there are two roles: admin and user
// User roles obtained from the background
const role = 'user'
// When a page is entered, the navigation guard router.beforeeach event is triggered
router.beforeEach((to,from,next) = >{
	 if(to.meta.roles.includes(role)){
	 	next() / / release
	 }esle{
	 	next({path:"/ 404"}) // Jump to the 404 page}})Copy the code

Since then, the routing permission control has been completed. Besides, the routing guard can also solve the business requirements of the routing to 404 page without matching. The implementation is as follows:

Import router from './router 'router.beforeeach ((to, from, next) => {//... If (to.matched. Length === 0) {next(' 404')} else {next()} //console.log(to, from, next, 'route guard ')})Copy the code

2.2 Implementation in VUE3

In fact, the idea is the same, but note that vue3 uses routing in a slightly different way than VUE2. Using my simpler 404 example to create vue3, the routing permission control for vue3 can be implemented according to vuE2 and the following code:

Create a route:

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

Route guard (globally registered in app.vue) :

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

4. Dynamically load menus and routes (addRoutes)

Vue-router provides the addRoutes() method, which can dynamically register routes. It should be noted that dynamic adding routes is push routes in the routing table. Because routes are matched sequentially, you need to put routes such as 404 pages last on the dynamic addition

5. To summarize

Regardless of vuE2 or VUE3, in fact, the implementation idea is similar, but the interface details will be slightly different. For us, the focus of learning should not be on a certain framework, but to train our own thinking