【Ant-Deisgn-Vue | 路由权限】根据返回用户身份创建对应的权限路由展示

项目场景：

1，前端获取登录用户身份；
2，根据用户身份展示不同的路由菜单；

---

功能分析：

1，异步路由模式开启；
2，本地异步路由目的其实是模拟异步网络请求方法；
3，根据本地编写的路由组合匹配当前身份的权限来定义路由组合以及路由权限；
4，模拟的异步的路由不用考虑身份权限问题

// 例如用户身份权限为 
let adminUser = 'admin'; 
// 权限组Demo
let UseroperMneu = [
{ "router": "Home", "name": "首页", "path": "Index", "authority": adminUser }
];

---

功能实现：

1，创建路由组配置文件，输出路由组；
2，接收路由组，构建程序路由权限；

---

Config_async.js

let Sfbox = ['admin1', 'admin2', 'admin3'];
export async function GetConfig(type) {
    console.log("获取用户身份",type)
    if (type == 'niuwa') {
        adminUser = Sfbox[0]
    } else if (type == 'niua') {
        adminUser = Sfbox[2]
    }else if(type == "shiba"){
        adminUser = Sfbox[1]
    }
    let options_buyer = [
    //无菜单包裹的页面
        { "router": "BuyerIndex", "name": "首页", "path": "BuyerIndex", "authority": adminUser },
  	// 菜单包裹路由
        {
            "router": "Buyer",
            "name": "采购管理",
            "children": [
                { "router": "config.js配置的path", "name": "baoguo1111", "path": "config.js配置的path", "authority": adminUser }
            ]
        }
]
export default {
    GetConfig
}

程序使用

import Quanxian from "@/router/config_fig.js"
//例如此时获取的用户身份权限为admin
let adminUser = "admin";
//需要在创建路由权限的时候配置相同的参数,作为后续获取信息使用
let Options = await Quanxian.GetConfig(adminUser);
this.setUser([{ "id":adminUser, _id, user, name,type}])// 设置用户信息
this.setPermissions([{ "id":adminUser, "operation": [] }])// 设置 可操作权限 permissions
this.setRoles([{ "id":adminUser, "operation": [] }])// 设置 可操作权限 roles
console.log(Options);
loadRoutes([{"router": 'root', "children":Options}]);//加载路由模型

---

效果展示
平台用户

高级用户

解决方案：

1，模拟异步路由的request方案；
2，获取路由组，创建路由组，搭建权限与路由组保持一致；