根据不同用户，后台返回不同模块

Question

1.每个模块都是vue-router的地址链接。想通过不同的用户登录，返回不同的模块，相当于是一个小的权限管理

2.（代码不美观）我这个方法是根据用户名里面包含哪些字段就返回哪些模块。

 <li class="sysButton" v-if="adminGrsc">
      <router-link to="/myStar" class="ly sysButtonWdsc"><i class="wdsc"></i>&nbsp;&nbsp;个人收藏</router-link>
    </li>      
    <li class="sysButton" v-if="adminTsgk">
      <router-link to="/PublicLiveBroadcast" class="ly sysButtonGwzb"><i class="gwzb"></i>&nbsp;&nbsp;庭审公开
      </router-link>
    </li>
    <li class="sysButton" v-if="adminSphy">
      <router-link to="/VideoConferencing" class="ly sysButtonSphy"><i class="sphy"></i>&nbsp;&nbsp;视频会议
      </router-link>
    </li>
    <li class="sysButton" v-if="adminZxzh">
      <router-link to="/ExecutiveCommand" class="ly sysButtonZxzh"><i class="zxzh"></i>&nbsp;&nbsp;执行指挥
      </router-link>
    </li>
    <li class="sysButton" v-if="adminSpjk">
      <router-link to="/VideoSurveillance" class="ly sysButtonSpjk"><i class="spjk"></i>&nbsp;&nbsp;视频监控
      </router-link>
    </li>
    <li class="sysButton" v-if="adminKjft">
      <router-link to="/TechologyCourt" class="ly sysButtonKjft"><i class="kjft"></i>&nbsp;&nbsp;科技法庭</router-link>
    </li>
    <li class="sysButton" v-if="adminSy">
      <router-link to="/homeOverview" class="ly sysButtonSy"><i class="sy"></i>&nbsp;&nbsp;首页</router-link>
    </li>
    
  export default {
data() {
return{
 adminSy: false,
    adminKjft: false,
    adminSpjk: false,
    adminZxzh: false,
    adminSphy: false,
    adminTsgk: false,
    adminSpdd: false,
    adminXtgl: false,
    adminGrsc: false,
    }
},
mounted(){
 $.ajax({
    type: "POST",
    url: "/avms/findModulesByParentId.action?",
    async: false,
    data: {
      "parentModuleId": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
      "moduleType": 1
    },
    success: function (res) {
      res = eval("(" + res + ")");
      var menuString = "";
      for (var i = 0; i < res.length; i++) {
        menuString += res[i].moduleCode + ",";
      }
      /**
       * AVMS_GRSC,AVMS_TSGK,AVMS_SPHY,AVMS_ZXZH,AVMS_SPJK,AVMS_KJFT,AVMS_SY,TXZX-TXZX,XTGL,
       */
      if (menuString.indexOf("AVMS_GRSC") != -1) {
        _this.adminGrsc = true;
      }
      if (menuString.indexOf("AVMS_TSGK") != -1) {
        _this.adminTsgk = true;
      }
      if (menuString.indexOf("AVMS_SPHY") != -1) {
        _this.adminSphy = true;
      }
      if (menuString.indexOf("AVMS_ZXZH") != -1) {
        _this.adminZxzh = true;
      }
      if (menuString.indexOf("AVMS_SPJK") != -1) {
        _this.adminSpjk = true;
      }
      if (menuString.indexOf("AVMS_KJFT") != -1) {
        _this.adminKjft = true;
      }
      if (menuString.indexOf("AVMS_SY") != -1) {
        _this.adminSy = true;
      }
      if (menuString.indexOf("TXZX-TXZX") != -1) {
        _this.adminSpdd = true;
      }
      if (menuString. indexOf("XTGL") != -1) {
        _this.adminXtgl = true;
      }
    },
    error: function (res) {
    }
  });
}
}

3.以前的做法是后台直接返回a标签，来显示该用户可以查看哪些模块。
现在的a标签是通过router-link编译过来的，后台直接返回router-link标签，前台不会进行编译。
直接返回a标签又会导致a标签内的href地址错误。

想请教各位这种带有路由的用户权限管理 怎么做才是正确的~

Answer 1

说下我现在在用的一直权限控制的方法的思路：

1.后端通过判断角色，将用户角色权限内的菜单地址返回给前端（地址是前端配置的路由，前端将每个菜单对应的路由地址提供给后端），一般是一个Array，如果是多级菜单，可以是一个树形的数据结构，参考如下格式：

[
    { path: '/a', name: 'menu a', children: [{ path: '/a/aa', name: 'sub menu of a ' }] },
    { path: '/b', name: 'menu b', children: [] },
    .....
]

2.前端页面拿到后端返回的菜单数据，将菜单数据存在vuex的store中，并循环渲染展示到页面
3.在vue-router的路由进入的钩子中，取到store中的菜单，判断当前要进入的路由是不是属于权限内的菜单，如果是则进入，不是则不进入