Vue implements two routing permission control methods

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')
   }]
})

//Assume that the user role obtained from the background through the interface can be stored in the token const role = 'user'

myRouter.beforeEach((to,from,next)=>{
 if (to.meta.roles.includes(role)) {
  next() //release }else{
  next({path:"/404"}) //jump to 404 page}
})

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);
 //Here we use the matched loop to find the reason why to.meta is not used directly:
 //When there are sub-routes, first make it clear that according to the normal click logic, the first-level route is first followed by the second-level route, and the judgment of permissions must be the same //to.meta => will directly search the meta of the sub-route. If the first-level route does not add requireAuth:true, the first-level route page should be blocked and cannot enter the second-level route page; if the user directly tampers with the URL address bar, then the second-level page can be entered, and there may be problems with permissions. Then all routes under this permission should be marked //to.matched => matched is a route array, which will collect the attributes of all routes including sub-routes, so through the loop judgment and search method, you only need to add permission identifiers to the first-level route to authorize other sub-routes under it.
 if(flag){
  next()
 }else{
  next({path:"/404"})
 }
})

//store.js
// Extract the 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')
  }
]

//store.js
setUserInfo (state, userInfo) {
  state.userInfo = userInfo
  state.auth = true // Mark auth as true when obtaining user information. Of course, you can also directly judge userInfo
  // Generate user routing table state.userRoutes = dynamicRoutes.filter(route => {
    return userInfo.menus.some(menu => menu.name === route.name)
  })
  router.addRoutes(state.userRoutes) // Register routes}

// App.vue
<div id="nav">
   <router-link to="/">Home</router-link>
   <router-link to="/login">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>