学习菜单权限

每个菜单都对应着一个页面，控制了导航菜单就相当于控制住了页面入口。 有权限的用户就会显示该用户菜单，无权限的用户就只会显示部分菜单。

import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'

//如果用户有权限，需要动态添加的路由
export const localRouter: RouteRecordRaw[] = [
  {
    path: '/main/analysis/dashboard',
    name: 'dashboard',
    component: () => import('@/views/main/analysis/dashboard/dashboard.vue'),
  },
  {
    path: '/main/analysis/overview',
    name: 'overview',
    component: () => import('@/views/main/analysis/overview/overview.vue'),
  },

  {
    path: '/main/system/department',
    name: 'department',
    component: () => import('@/views/main/system/department/department.vue'),
  },
  {
    path: '/main/system/user',
    name: 'user',
    component: () => import('@/views/main/system/user/user.vue'),
  },
  {
    path: '/main/system/menu',
    name: 'menu',
    component: () => import('@/views/main/system/menu/menu.vue'),
  },
  {
    path: '/main/system/role',
    name: 'role',
    component: () => import('@/views/main/system/role/role.vue'),
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  //每个用户都有的页面
  routes: [
    {
      path:'/',
      redirect:'/main'
    },
    {
      path:'/login',
      component: () => import('@/views/login/login.vue')
    },
    {
      path:'/main',
      name:'main',
      component: () => import('@/views/main/main.vue'),
    },
    {
      path:'/:pathMatch(.*)',
      component: () => import('@/views/not-found/not-found.vue')
    }
  ]
})
export default router

• 用户登录之后，获取登录用户的详细信息（帐号，密码，token，角色等）；
• 再根据登录用户的角色发送网络请求获取菜单。

const userMenus = 
[
    {
        "id": 38,
        "name": "系统总览",
        "type": 1,
        "url": "/main/analysis",
        "icon": "el-icon-monitor",
        "sort": 1,
        "children": [
            {
                "id": 39,
                "url": "/main/analysis/overview",
                "name": "核心技术",
                "type": 2,
                "children": null,
            },
            {
                "id": 40,
                "url": "/main/analysis/dashboard",
                "name": "商品统计",
                "type": 2,
                "children": null,
            }
        ]
    },
    {
        "id": 1,
        "name": "系统管理",
        "type": 1,
        "url": "/main/system",
        "icon": "el-icon-setting",
        "sort": 2,
        "children": [
            {
                "id": 2,
                "url": "/main/system/user",
                "name": "用户管理",
                "type": 2,
            },
            {
                "id": 3,
                "url": "/main/system/department",
                "name": "部门管理",
                "type": 2,
            },
            {
                "id": 4,
                "url": "/main/system/menu",
                "name": "菜单管理",
                "type": 2,
            },
            {
                "id": 25,
                "url": "/main/system/role",
                "name": "角色管理",
                "type": 2,
            }
        ]
    },
    //......
]

import { localRouter } from '@/router'
//根据用户菜单去匹配需要加载的路由
function mapMenusToRoutes(userMenus: any[]) {
  const routes: RouteRecordRaw[] = []
  for (const menu of userMenus) {
    for (const submenu of menu.children) {
      const route = localRouter.find(item => item.path === submenu.url)
      if (route) routes.push(route)
    }
  }
  return routes
}

  //动态的添加路由
  const routes = mapMenusToRoutes(this.userMenus)
  routes.forEach(route => {
    router.addRoute('main', route)
  });