This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Route permission control is usually used in the background management system to restrict the access permissions of different service personnel to the pages. For the pages without permission, redirect to the 404 page or prompt “No permission”.

Method 1: Routing Meta Information

Put all pages in the routing table, and you just need to determine the role permissions at the time of access. 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, add roles that have access to the 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.

Example 1: Judging by 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')}]})Const role = 'user' myRouter.beforeeach ((to,from,next)=>{
    if(to.meta.roles.includes(role)){        
    next()    / / release
    }else{        
    next({path:"/ 404"})    // Jump to the 404 page
    }})
Copy the code

Example 2: Add an identifier to the meta that needs permission

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: 'home'           
    icon: 'home'.requireAuth: true        },        
    component: () = > import('@/views/Home')}, {path: '/ 404'.component: () = > import('@/components/404')     }]})myRouter.beforeEach((to,from,next) = >{    
    let flag = to.matched.some(record= >record.meta.requireAuth);    

    if(flag){        
    next()    }else{       
    next({path:"/ 404"})}})Copy the code

Method 2: Dynamically generating routing tables (addRoutes)

Dynamically add menus and routing tables according to user rights or user attributes, so that user functions can be customized. Vue-router provides the addRoutes() method for dynamically registering routes. Note that dynamic adding is a push route in the routing table. Since routes are matched in order, routes such as 404 pages need to be placed last for dynamic adding.

}}}}}}}}}}}}}}}}}}}}}}}} //to. Meta => Search the meta of the child route directly. If the level 1 route does not include requireAuth:true, The level-1 routing page should have been blocked can not enter the level-2 routing page; If the user directly tampers with the URL address bar, then the secondary page can be accessed, and the permission may be problematic. //to.matched => matched is a route array that aggregates the attributes of all routes including child routes. Therefore, you only need to add the permission id to the level 1 route to authorize other child routes under the level 1 route.

// store.js
// Extract routes that need to be dynamically registered into vuEX
const dynamicRoutes = [  {    
    path: '/manage'.name: 'Manage'.meta: {      requireAuth: true    },    
    component: () = > import('./views/Manage')}, {path: '/userCenter'.name: 'UserCenter'.meta: {      requireAuth: true    },   
    component: () = > import('./views/UserCenter')}]Copy the code

Add the userRoutes array in vuex to store the user’s custom menu. Generate the user’s routing table in setUserInfo based on the menu returned by the back end.

// store.jssetUserInfo (state, userInfo) {  
    state.userInfo = userInfo  state.auth = true 
    // Set auth to true when userInfo is obtained
    // Generate the user routing table
    state.userRoutes = dynamicRoutes.filter(route= > {    
        return userInfo.menus.some(menu= > 
        menu.name === route.name)  
    }) 
    router.addRoutes(state.userRoutes) // Register the route
Copy the code

Modify menu rendering

// App.vue
<div id="nav">      
    <router-link to="/">The home page</router-link>      
    <router-link to="/login">The login</router-link>      
    <template v-for="(menu, index) of $store.state.userInfo.menus">        
    <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>      
   </template>
 </div>
Copy the code

Are you a loser?

The road ahead is long; I see no ending. I will search up and down.