vue处理菜单权限

vue项目处理菜单权限

第一种：后台直接返回菜单数据，例如:

menuList:[
   {
     path:'/home',
     icon:'icon home',
     title:'首页'
   },
   {
     path:'/table',
     icon:'icon table',
     title:'表单'
   },
   ...
]

数据返回后，直接拿到el-menu中去遍历（个人使用的elementUI）

<el-menu
          :default-active="routh"
          router
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          :unique-opened="true"
        >
          <template v-for="(item, index) in menuList">
            <template v-if="item.childMenuList">
              <el-submenu :index="index + 'index'" :key="index">
                <template slot="title">
                  <i :class="item.menuIcon" class="icon iconfont"></i>
                  <span>{{ item.menuName }}</span>
                </template>
                <el-menu-item
                  v-for="(it, d) in item.childMenuList"
                  :key="d"
                  :index="it.menuPath"
                  class="child_menu"
                  :class="{ long_font: it.menuName.length > 6 }"
                  >{{ it.menuName }}</el-menu-item
                >
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="index" class="main-menus">
                <i :class="item.menuIcon" class="icon iconfont"></i>
                <span slot="title">{{ item.menuName }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>

关于权限问题，在不同登录者的权限下，返回不同的菜单信息，不影响展示

注意：以上的数组仅做参考，具体按照后端返回数据处理，前提是数据格式跟示例类似

第二种：后端返回的数据格式与正常路由中的格式差距过大，例如：

[
    {'admin':'shopDetail'},
    {'admin':'home'},
    {'user':'userInfo'},
    {'aaa','bbb'}
    ...
]

类似这种，个人暂时的处理方案为以下几个点：

1. 先定义一个菜单数组menuList，menuList中写入仅通过不同权限进入的所有页面

2. 在menuList中添加用户返回的菜单数据的相关信息，可以用key:value的形式（假设返回的菜单数据为returnMenuList）

3. 通过menuList与returnMenuList进行比较，得到最终展示到页面上的菜单lastMenuList

   //数据仅供参考，具体按照实际业务逻辑及后端返回数据为准
   
   //假设只有三个页面
   const menuList=[
       { 
           path:'home',
           icon:'icon home',
        	title:'首页',
           menuName:'bbb', //后端返回的菜单对应首页
       },
       { 
           path:'one',
           icon:'icon one',
        	title:'页面1',
           menuName:'aaa', //后端返回的菜单对应页面1
       },
       { 
           path:'two',
           icon:'icon two',
        	title:'页面2',
           menuName:'abc', //后端返回的菜单对应页面2
       },
   ]
   
   //后端返回的用户菜单信息
   let returnMenuList=[
       {'aaa':'a'}, //a代表页面1
       {'bbb':'home'}, //b代表页面首页
   ]
   
   //比较menuList 与 returnMenuList 得到lastMenuList
   //再将lastMenuList展示到页面上
   

   注意：该方法不展示用户没有该权限的页面，但是能通过路由进去，此时需要添加一个判断

    let map = new Map(Object.entries(returnMenuList));
    let menus = menuList.filter(item => {
           if (map.has(item.menu)) {
             return item.menu
           }
       })
    /**根据权限匹配输入框路由是否有权限访问 */
    let some = menus.some((r) => {
   	return r.path === this.routh //在created中添加 this.routh=this.$route.path
    })
    if (!some) {
   	this.$router.replace('/404')
    }
   

有更好的处理权限方法欢迎小伙伴留言哦~