动态router权限

权限

1、后端返回角色（前端去配置）

2、后端返回数据

第一种方法后端返回数据(前端配置)

一、mock模拟的对比数据

推荐 https://www.fastmock.site/ 网站 模拟接口的

{
   
   
  "code": "200",
  "message": "登录成功",
  "meunList": [{
   
   
      "name": "home"
    },
    {
   
   
      "name":"detail"
    },
    {
   
   
      "name": "form",
      "children": [{
   
   
        "name": "form1"
      }]
    },
    {
   
   
      "name": "transition",
      "children": [{
   
   
          "name": "transition1"
        },
        {
   
   
          "name": "transition2"
        }
      ]
    },
    {
   
   
      "name": "test",
      "children": [{
   
   
          "name": "test1"
        },
        {
   
   
          "name": "test2"
        }
      ]
    },
  ]
}

二、 layout

• silder.vue

利用的vuex里面的数据
<template>
  <!-- 侧边栏 -->
  <div class="sliber-container" style="width: 256px">
    <a-menu
      :selectedKeys="[$route.path]"   // 让其手动刷新的时候还能定位到原来的url
      mode="inline"
      theme="dark"
      :inline-collapsed="$store.state.collapsed"
      @select="handleSelect"
    >
      <template v-for="item in $store.state.oneRouter.silderbarMeun">
        <a-menu-item v-if="!item.children" :key="'/'+item.name">
          <a-icon type="mail" />
          <span>
            {
   
   {
   
   item.meta.title}}
          </span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.name">
            <span slot="title">
              <a-icon type="mail" />
              <span>{
   
   {
   
   item.meta.title}}</span>
            </span>
            <a-menu-item v-for="$1 in item.children" :key="'/'+item.name + '/' + $1.name">
              {
   
   {
   
   $1.meta.title}}
            </a-menu-item>
         </a-sub-menu>
      </template>     
    </a-menu>
  </div>
</template>

• header.vue

<template>
  <!-- 进入首页后我们要使用localStorage
        把登陆时存储的用户名取出来显示在右边登录名的地方，
        当用户点击注销图标的时候，清除localStorage，
        并跳转回登陆页面。 -->
  <!-- 头部 -->
  <div class="header_container">
    <div class="header_left">
      <span>恓惶后台系统</span>
    </div>
    <div class="header_right">
      <a-avatar icon="user" />
      <span class="user-name" @click="exitFn">登出</span>
    </div>
  </div>
</template>
<script>
export default {
   
   
  data