Vue2+filter实现权限管理，使不同用户进入不同界面

最新推荐文章于 2024-05-08 19:14:55 发布

你在找森么哩

最新推荐文章于 2024-05-08 19:14:55 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： vue vue.js

本文链接：https://blog.csdn.net/ZHAOXINHA/article/details/124383926

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

有三种用户：系统管理员，部门管理员，部门成员
data里的menulist菜单如下，需设置一个root数组，标识角色信息

data(){
    return {
      //左侧菜单栏
      // menulist:[],
      menulist:[
        {
            id: 125,
            authName: "用户管理",
            path: 'users',
            root:["system_administrator","organization_member","organization_administrator"],
            children: [
                {
                    id: 110,
                    authName: "用户列表",
                    path: 'users',
                    children: []
                },
                {
                    id: 111,
                    authName: "管理员列表",
                    path: 'admins',
                    children: []
                }
            ]
        },
        ]
        }
        }

created(){
    this.getMenuList(),
  },

根据root数组里的信息进行过滤

//获取所有的菜单
    /**/async getMenuList(){
      // console.log("进入menulist");
      // console.log("测试"+this.menulist[0].root)
      this.menulist=this.menulist.filter(item=>{
        // console.log("item.root："+item.root)
        // console.log(sessionStorage.getItem("action"))
        let res=sessionStorage.getItem("action")
      if(item.root.indexOf(res)!=-1)
      {
        // console.log("hello")
        // console.log("item："+item)
        return item;
      }
        
    })
    console.log(menulist);
      console.log(res)
    },