权限路由管理的实现，根据角色或者动态设置_rn根据角色动态加载路由

1. 根据角色

1.配置路由信息的时候，添加一个role属性，可以是，所有用户可见的路由role设为0，A类型用户可见的路由role设为1，B类型用户可见的路由role设为2；

2.将数据库的用户数据表添加role字段；

3.用户登录之后获取到role属性值，将它存储到全局状态管理和本地存储；

4.给role为1的用户设置菜单栏为0+1，给role为2的用户设置菜单栏为0+2；

5.访问时，如果没有路由就返回404页面，如果有路由而没有权限就返回没有权限的页面。

2. 动态设置（更灵活）

1.配置路由信息的时候，添加一个keyid属性，在路由信息的数组里，每一个对象的keyid都是唯一的；

2.将数据库的用户数据表添加checkedKeys字段；

3.在系统里修改某用户权限信息的时候，应该使用树状结构的组件，例如element-plus的el-tree组件、antd的Tree组件；

4.当 vue 项目使用了 vue-router 的时候，RouteRecordRaw 的子路由数组的属性名和 elementui 的 el-tree 需要接收的数组的元素的子对象数组的属性名都为 'children' ，可以直接传递；当 react 项目使用了 react-router-dom 的时候，给 antd 的 Tree 组件 传递 checkedKeys 数组和 treeData 数组；

5.当树形组件的选择被改变的时候会触发一个事件check-change，可以根据需求和传递给回调函数的参数改变checkedKeys变量，当确定修改的时候，发送请求，修改该用户的数据表信息；

6.用户登录之后获取到checkedKeys属性值，将它存储到全局状态管理和本地存储；

然后根据需求和checkedKeys定义规则，给不同的checkedKeys返回不同的菜单栏；

例如，最高级菜单为三级的情况，定义一个函数获取新菜单：

const getMenusFn = (menus: IMenuType[], [...arr]: string[]) => {
    // arr  ['0-0', '0-7-1-1', '0-4-2', '0-4-3', '0-4-3-0', '0-4-3-1']
    // 原始二级菜单
    const secondaryMenu: IMenuType[] = []
    menus.forEach((item) => {
        if (item.children) {
            item.children?.forEach((semenu: IMenuType) => {
                secondaryMenu.push(semenu)
            })
        }
    })
    // 原始三级菜单
    const thirdLevelMenu: IMenuType[] = []
    secondaryMenu.forEach((item) => {
        if (item.children) {
            item.children?.forEach((thmenu: IMenuType) => {
                thirdLevelMenu.push(thmenu)
            })
        }
    })
    const newMenus: IMenuType[] = []
    // 用户一级菜单
    const firstLevelMenu: string[] = []
    // 用户二级菜单 
    const secondLevelMenu: string[] = []
    arr.forEach((str: string) => {
        if (str.split('-').length === 2) {
            firstLevelMenu.push(str)
            const menu = menus.find((menu: IMenuType) => {
                return menu.keyid === str
            })
            menu && newMenus.push(menu)
        }
    })
    for (let i = 0; i < arr.length; i++) {
        const _arr = arr[i].split('-')
        if (_arr.length >= 3) {
            const _str = _arr.slice(0, 2).join('-')
            if (firstLevelMenu.findIndex((__str: string) => _str === __str) >= 0) {
                arr.splice(i, 1)
                i--
            }
        }
    }
    arr.forEach((str: string) => {
        if (str.split('-').length === 3) {
            secondLevelMenu.push(str)
            const menu = secondaryMenu.find((menu: IMenuType) => {
                return menu.keyid === str
            })
            menu && newMenus.push(menu)
        }
    })
    for (let i = 0; i < arr.length; i++) {
        const _arr = arr[i].split('-')
        if (_arr.length >= 4) {
            const _str = _arr.slice(0, 3).join('-')
            if (secondLevelMenu.findIndex((__str: string) => _str === __str) >= 0) {
                arr.splice(i, 1)
                i--
            }
        }
    }
    arr.forEach((str: string) => {
        if (str.split('-').length === 4) {
            const menu = thirdLevelMenu.find((menu: IMenuType) => {
                return menu.keyid === str
            })
            menu && newMenus.push(menu)
        }
    })
    return newMenus
}

7.访问时，如果没有路由就返回404页面，如果有路由而没有权限就返回没有权限的页面。