Menu permission implementation

/ * background the returned data access routes: [0: "Test", rank 1: "Test2", 2: "Test3",... * /

import Layout from '@/layout'
// By default any user can see the routing component
const constantRoutes = [
    {
        path: '/login'.component: () = > import('@/views/login/index'),
        hidden: true
    },

    {
        path: '/ 404'.component: () = > import('@/views/404'),
        hidden: true
    },

    {
        path: '/'.component: Layout,
        redirect: '/dashboard'.children: [{
            path: 'dashboard'.name: 'Dashboard'.component: () = > import('@/views/dashboard/index'),
            meta: {title: 'home'.icon: 'dashboard'}}}]]// Redirect is written to the end of the route
const anyRoutes = {path: The '*'.redirect: '/ 404'.hidden: true}
// Routes requiring permissions
const asyncRoutes = [
    /* Merchandise management */
    {
        name: 'Test'.path: '/test'.component: Layout,
        redirect: {name: 'test2'},
        meta: {
            title: 'test'.icon: 'el-icon-s-shop'
        },
        children: [{name: 'test2'.path: 'test2/list'.component: () = > import(/* webpackChunkName: "test2" */ '@/views/product/test2/list'),
                meta: {title: 'test 2'}}, {name: 'test3'.path: 'test3/list'.component: () = > import(/* webpackChunkName: "test3" */ '@/views/product/test3/list'),
                meta: {
                    title: 'test 3'}}}]/** * Filter routes *@param AsyncRoutes requires permission routing *@param RouteNames: The background returns the permission information of the user *@returns {Promise<void>} Processed asyncRouters string */
function handleBaseRouterToRolesRouter (asyncRoutes, routeNames) {
    // Filter data
  let routes = asyncRoutes.filter(item= > {
    return routeNames.some(r= > {
      return r === item.name
    })
  })
  // recursive traversal
  for (const item of routes) {
    if (item.children) {
      item.children = handleBaseRouterToRolesRouter(item.children, routeNames)
    }
  }
  return routes
}

// Use the addRoutes method to complete dynamic routing
// addRoutes dynamically add more routing rules add 404 to the end = anyRoutes
router.addRoutes([...handleBaseRouterToRolesRouter(asyncRoutes,'Background returned permission data'), anyRoutes])
Copy the code

Button permission implementation

Update ", 2: "cuser.delete", 3: "btn.user.add"... * /
/** * Check whether the current user has the button permission *@param {button permission string} permission* /
export function hasBtnPermission(permission) {
  // Get all button permissions for the current user
  const myBtns = store.getters.buttons
  // If the specified function permission is in myBtns, return true ==> the button will be displayed, otherwise hidden
  returnmyBtns.indexOf(permission) ! = = -1
}
// The usage mode
// $hasBP is placed on the prototype
// Mount to the Vue prototype object so that it is visible directly in the component
// Vue.prototype.$hasBP = hasBtnPermission
// Or custom directives
/ * (el - button type = "danger" v - if = "$hasBP (' BTN. Role. Remove ')" > batch delete < / el - button > * * /
Copy the code