Routing permission control is often used in the background management system, which restricts permissions to pages that different business personnel can access.
For pages without permission, you can jump to 404 pages or prompt that there is no permission.
Method 1: Routing meta information (meta)
Put all pages in the routing table, just judge the role permissions when accessing.
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.
In the meta property, add the roles that can access the route to roles. 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.
Example 1: Judgment through roles
const myRouter = new VueRouter({
routes: [{
path: '/login',
name: 'login',
meta: {
roles: ['admin', 'user']
},
component: () => import('@/components/Login')
},{
path: '/home',
name: 'home',
meta: {
roles: ['admin']
},
component: () => import('@/views/Home')
},{
path: '/404',
component: () => import('@/components/404')
}]
})
//Suppose that the user role obtained from the background through the interface can be stored in the tokenconst role = 'user'
((to,from,next)=>{
if((role)){
next() //Released }else{
next({path:"/404"}) //Skip to page 404 }
})
Example 2: Add flags to meta that require permissions
const myRouter = new VueRouter({
routes: [{
path: '/login',
name: 'login',
meta: {
title: 'Login page'
icon: 'login'
},
component: () => import('@/components/Login')
},{
path: '/home',
name: 'home',
meta: {
title: 'front page'
icon: 'home',
requireAuth: true
},
component: () => import('@/views/Home')
},{
path: '/404',
component: () => import('@/components/404')
}]
})
((to,from,next)=>{
let flag = (record=>);
// Here we use matched loop to find the reasons why we are not directly used: //When there is a subroutine, firstly according to the normal click logic, you should first go to the first level routing and then enter the second level routing. This is also the case for the judgment of permissions. // => will directly search for the subroutine meta. If the first-level route does not add requireAuth:true, the first-level route page should have been blocked and cannot enter the second-level route page; if the user directly tampers with the URL address bar, he can enter the second-level page, and permissions may be problematic. Then you should add tags to the routes below this permission // => matched is a route array that will collect all routes, including subroutine attributes, so by looping to determine the search method, you only need to add permission identifiers to the first-level route to permissions to other subroutines below it. if(flag){
next()
}else{
next({path:"/404"})
}
})
Disadvantages: It is a waste of computing resources to do a verification every time the route jumps. In addition, for routes that users do not have permission to access, they should not theoretically be mounted.
Method 2: Dynamically generate routing tables (addRoutes)
Dynamically add menus and routing tables based on user permissions or user attributes, and customize user functions can be achieved.
vue-router provides the addRoutes() method, which allows you to register routes dynamically. It should be noted that dynamically added routes are pushed routes in the routing table. Since routes match in order, routes such as 404 pages need to be placed at the end of dynamic addition.
//
// Extract routes that require dynamic registration into vuexconst dynamicRoutes = [
{
path: '/manage',
name: 'Manage',
meta: {
requireAuth: true
},
component: () => import('./views/Manage')
},
{
path: '/userCenter',
name: 'UserCenter',
meta: {
requireAuth: true
},
component: () => import('./views/UserCenter')
}
]
Add a userRoutes array in vuex to store user custom menus. Generate the user's routing table in setUserInfo based on the menu returned by the backend.
//
setUserInfo (state, userInfo) {
= userInfo
= true // Mark auth as true when obtaining user information. Of course, you can directly judge userInfo // Generate user routing table = (route => {
return (menu => === )
})
() // Register a route}
Modify menu rendering
//
<div >
<router-link to="/">Home page</router-link>
<router-link to="/login">Log in</router-link>
<template v-for="(menu, index) of $">
<router-link :to="{ name: }" :key="index">{{}}</router-link>
</template>
</div>
This is the article about Vue implementing two ways of routing permission control. For more related Vue routing permission control content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!