路由和权限

路由加载实现两种方案：

• 一种是前端进行拦截，角色权限清晰不会随意变更时，建议使用这种方式
• 一种是完全的后端配置，让后端来实现菜单权限

路由配置项

语法与 vue-router 语法一致，具体详见src/router/index.js。

{
  //当设置 true 的时候该路由不会再侧边栏出现
  hidden: true; // (不写的话默认 false)
  //当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
  redirect: 'noRedirect';
  //是否显示根节点，如果children只有一个时此项为false，会不显示父级，此项为true会显示父级
  alwaysShow: true;
  //设定路由的名字，首字母大写，一定要填写并且要跟view的name对应不然使用<keep-alive>时会出现各种问题
  name: 'Test';
  meta: {
    //是否固定不允许删除
    affix: true,
    //右侧bage小红框显示的文字内容
    badge: "Pro",
    // 如果设置为false，则不会在breadcrumb面包屑中显示
    breadcrumb: false,
    //设置该路由进入的权限，支持多个权限叠加
    permissions: ['admin', 'editor', 'test'];
    //设置该路由在侧边栏和面包屑中展示的名字
    title: 'title';
    //设置该路由的图标,在常规图标中拷贝即可
    icon: '';
    //设置该路由的图标,在小清新图标中拷贝即可，但小清新图标的svg默认未集成到项目需要手动下载并拷贝到根目remixIcon/svg文件夹下
    remixIcon: '';
    //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    noKeepAlive: true
  }
}

后端返回权限 前端根据权限拦截路由

settings.js 配置项

authentication: "intelligence";

• 代码参考地址： router

后端完全控制前端路由

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 组件中有示例 代码示例：

• 方案一

<template>
  <div class="demo-container">
    <el-button v-if="checkPermission(['admin'])" type="primary">
      按钮级权限
    </el-button>
  </div>
</template>

<script>
  import checkPermission from "@/utils/permission";

  export default {
    name: "Demo",
    data() {
      return {};
    },
    created() {},
    mounted() {},
    methods: {
      checkPermission,
    },
  };
</script>
<style lang="scss" scoped></style>

• 方案二

<template>
  <div class="demo-container">
    <el-button v-permissions="['admin']" type="primary">按钮级权限</el-button>
  </div>
</template>

<script>
  export default {
    name: "Demo",
    data() {
      return {};
    },
    created() {},
    mounted() {},
  };
</script>
<style lang="scss" scoped></style>