路由加载实现两种方案：
- 一种是前端进行拦截，角色权限清晰不会随意变更时，建议使用这种方式
- 一种是完全的后端配置，让后端来实现菜单权限
路由配置项
语法与 vue-router 语法一致，具体详见src/router/index.js。
{
//当设置 true 的时候该路由不会再侧边栏出现
hidden: true; // (不写的话默认 false)
//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect';
//是否显示根节点，如果children只有一个时此项为false，会不显示父级，此项为true会显示父级
alwaysShow: true;
//设定路由的名字，首字母大写，一定要填写并且要跟view的name对应不然使用时会出现各种问题
name: 'Test';
meta: {
//是否固定不允许删除
affix: true,
//右侧bage小红框显示的文字内容
badge: "Pro",
// 如果设置为false，则不会在breadcrumb面包屑中显示
breadcrumb: false,
//设置该路由进入的权限，支持多个权限叠加
permissions: ['admin', 'editor', 'test'];
//设置该路由在侧边栏和面包屑中展示的名字
title: 'title';
//设置该路由的图标,在常规图标中拷贝即可
icon: '';
//设置该路由的图标,在小清新图标中拷贝即可，但小清新图标的svg默认未集成到项目需要手动下载并拷贝到根目remixIcon/svg文件夹下
remixIcon: '';
//如果设置为true，则不会被 缓存(默认 false)
noKeepAlive: true
}
}
后端返回权限 前端根据权限拦截路由
settings.js 配置项
authentication: "intelligence";后端完全控制前端路由
settings.js 配置项
authentication: "all";代码参考地址（后端按照 mock 数据返回即可）router
注意事项：后端返回的 JSON 格式一定要保证正确，控制台不报红色和黄色证明路由渲染正确，当你配置成后端完全控制前端时，前端会在登陆后多触发一个获取动态菜单的请求
/menu/navigate来处理接口信息，这个接口写起来比较繁琐，当然都是后端的工作，这里一定要仔细仔细再仔细，路由以及文件全部交给后端返回，一定要保证浏览器控制台一个错误都没有，后端稍有不慎，对前端来说都是致命的
后端完整返回的 json 格式示例，其中 permissions 字段暂时无关紧要，因为是后端完全控制权限，所有建议只在 userIfo 时返回即可，比如按钮级别权限会用到.
{
"code": 200,
"msg": "success",
"data": [
{
"path": "/",
"component": "Layout",
"redirect": "index",
"children": [
{
"path": "index",
"name": "Index",
"component": "index/index",
"meta": {
"title": "首页",
"icon": "home",
"affix": true,
"noKeepAlive": true
}
}
]
},
{
"path": "/test",
"component": "Layout",
"redirect": "noRedirect",
"children": [
{
"path": "test",
"name": "Test",
"component": "test/index",
"meta": {
"title": "test ",
"icon": "marker",
"permissions": ["admin", "test"]
}
}
]
},
{
"path": "/byui",
"component": "Layout",
"redirect": "noRedirect",
"name": "Byui",
"meta": { "title": "组件", "icon": "cloud" },
"alwaysShow": true,
"children": [
{
"path": "permission",
"name": "Permission",
"component": "byui/permission/index",
"meta": {
"title": "权限控制",
"permissions": ["admin", "editor", "test"]
}
},
{
"path": "menu1",
"component": "byui/nested/menu1/index",
"name": "Menu1",
"meta": { "title": "嵌套路由 1", "permissions": ["admin"] },
"alwaysShow": true,
"children": [
{
"path": "menu1-1",
"component": "byui/nested/menu1/menu1-1/index",
"name": "Menu1-1",
"meta": { "title": "嵌套路由 1-1" },
"alwaysShow": true,
"children": [
{
"path": "menu1-1-1-1",
"component": "byui/nested/menu1/menu1-1/menu1-1-1/index",
"name": "Menu1-1-1",
"meta": { "title": "嵌套路由 1-1-1" }
}
]
}
]
},
{
"path": "table",
"name": "Table",
"component": "byui/table/index",
"meta": { "title": "表格", "permissions": ["admin", "editor"] }
},
{
"path": "form",
"name": "Form",
"component": "byui/form/index",
"meta": { "title": "表单", "permissions": ["admin"] }
},
{
"path": "element",
"name": "Element",
"component": "byui/element/index",
"meta": { "title": "常用组件", "permissions": ["admin"] }
},
{
"path": "tree",
"name": "Tree",
"component": "byui/tree/index",
"meta": { "title": "树", "permissions": ["admin"] }
},
{
"path": "card",
"name": "Card",
"component": "byui/card/index",
"meta": { "title": "卡片", "permissions": ["admin"] }
},
{
"path": "magnifier",
"name": "Magnifier",
"component": "byui/magnifier/index",
"meta": { "title": "放大镜", "permissions": ["admin"] }
},
{
"path": "waterfall",
"name": "Waterfall",
"component": "byui/waterfall/index",
"meta": {
"title": "瀑布屏",
"noKeepAlive": true,
"permissions": ["admin"]
}
},
{
"path": "echarts",
"name": "Echarts",
"component": "byui/echarts/index",
"meta": { "title": "图表", "permissions": ["admin"] }
},
{
"path": "loading",
"name": "Loading",
"component": "byui/loading/index",
"meta": { "title": "loading", "permissions": ["admin"] }
},
{
"path": "player",
"name": "Player",
"component": "byui/player/index",
"meta": {
"title": "视频播放器",
"noKeepAlive": true,
"permissions": ["admin"]
}
},
{
"path": "editor",
"name": "Editor",
"component": "byui/editor/index",
"meta": { "title": "富文本编辑器", "permissions": ["admin"] }
},
{
"path": "qrCode",
"name": "QrCode",
"component": "byui/qrCode/index",
"meta": { "title": "二维码", "permissions": ["admin"] }
},
{
"path": "backToTop",
"name": "BackToTop",
"component": "byui/backToTop/index",
"meta": { "title": "返回顶部", "permissions": ["admin"] }
},
{
"path": "lodash",
"name": "Lodash",
"component": "byui/lodash/index",
"meta": { "title": "lodash", "permissions": ["admin"] }
},
{
"path": "imgComparison",
"name": "ImgComparison",
"component": "byui/imgComparison/index",
"meta": { "title": "图像拖拽比对", "permissions": ["admin"] }
},
{
"path": "codeGenerator",
"name": "CodeGenerator",
"component": "byui/codeGenerator/index",
"meta": { "title": "代码生成机", "permissions": ["admin"] }
},
{
"path": "markdown",
"name": "Markdown",
"component": "byui/markdown/index",
"meta": { "title": "markdown阅读器", "permissions": ["admin"] }
},
{
"path": "smallComponents",
"name": "SmallComponents",
"component": "byui/smallComponents/index",
"meta": { "title": "小组件", "permissions": ["admin"] }
},
{
"path": "icon",
"name": "Icon",
"component": "byui/icon/index",
"meta": { "title": "常规图标", "permissions": ["admin"] }
},
{
"path": "colorfulIcon",
"name": "ColorfulIcon",
"component": "byui/icon/colorfulIcon",
"meta": { "title": "多彩图标", "permissions": ["admin"] }
},
{
"path": "remixIcon",
"name": "RemixIcon",
"component": "byui/icon/remixIcon",
"meta": {
"title": "小清新图标(图标过多打开会慢)",
"permissions": ["admin"]
}
},
{
"path": "upload",
"name": "Upload",
"component": "byui/upload/index",
"meta": { "title": "上传", "permissions": ["admin"] }
},
{
"path": "sticky",
"name": "Sticky",
"component": "byui/sticky/index",
"meta": { "title": "sticky吸附", "permissions": ["admin"] }
},
{
"path": "log",
"name": "Log",
"component": "byui/errorLog/index",
"meta": { "title": "错误日志模拟", "permissions": ["admin"] }
},
{
"path": "news",
"name": "News",
"component": "byui/news/index",
"meta": { "title": "新闻（可能存在跨域）", "permissions": ["admin"] }
},
{
"path": "more",
"name": "More",
"component": "byui/more/index",
"meta": { "title": "更多组件", "permissions": ["admin"] }
}
]
},
{
"path": "/error",
"component": "EmptyLayout",
"redirect": "noRedirect",
"name": "Error",
"meta": { "title": "错误页", "icon": "bug" },
"alwaysShow": true,
"children": [
{
"path": "/401",
"name": "401",
"component": "401",
"meta": { "title": "401" }
},
{
"path": "/404",
"name": "404",
"component": "404",
"meta": { "title": "404" }
}
]
}
]
}
按钮级权限
思路：获取用户信息时获取 permissions，存到 store 里面，然后页面根据权限进行按钮级控制，具体看下 permission 组件中有示例 代码示例：
- 方案一
按钮级权限
- 方案二
按钮级权限