vue实现菜单权限控制

秒速五厘米 2022-10-18 00:54 216阅读 0赞

**需求：**

当前系统登录用户具有不同的角色，前端页面需要针对不同角色用户来展现不同的菜单，从而需要实现菜单权限控制功能。

**思路：**

1.  获取后台返回的菜单数据；
2.  根据菜单数据遍历加载需要的菜单路由，没有权限的菜单路由就不加载；
3.  使用全局守卫导航配合实现。
4.  特别说明：如果所有的菜单路由都加载，当用户在地址栏中输入路由路径就可以访问没有权限的菜单页面，这样就达不到菜单权限控制的需求；如果所有的菜单都加载并且使用全局守卫导航，在每次跳转路由的时候都去判断当前用户是否有这个权限，再决定是否跳转，这样虽然可行，但是考虑到前端性能的问题，还具有优化的空间。

**具体步骤**

1.  新建2个路由文件，一个用于存放公共路由(router.js)，一个用于引入所有的路由(components.js)，如下
    
        router.js
        //通用页面路由
        const router = new Router({
          // mode:"history",
          routes: [
            {
              path: "/",
              redirect: "/login"
            },
            {
              path: "/login",
              name: "login",
              component: Login
            }
          ]
        })
    
        components.js
        const workplace = require("@/components/workplace/Workplace.vue").default;//工作台
        ......
        
        export default {
          workplace,
          ......
        }
2.  获取后台返回的菜单数据，加载需要的路由，此步骤在全局守卫导航中实现
    
        router.js
        
        import api from "../api/api.js"
        import routeMap from "@/router/components.js"  //引入所有的组件
        var myRouter = [],   //存放具有权限的路由名称
        routerMeta = {},     //页面按钮权限控制相关，菜单权限可以不需要
        isFetchRemote = true;//保证菜单数据只加载一次
        
        //遍历树：将菜单数据转化成  
        function getMyRouter(datas) {
          for (var i in datas) {
            if (datas[i].isShow && datas[i].path != undefined && datas[i].path != "") {
              myRouter.push(datas[i].path);
              routerMeta[datas[i].path] = datas[i].meta
            }
            if (datas[i].child) {
              getMyRouter(datas[i].child);
            }
          }
        }
        // 全局守卫导航
        router.beforeEach((to, from, next) => {
          let username = sessionStorage.getItem('username');
          // 未登录状态；当路由到nextRoute指定页时，跳转至login
          if (!username) {
            next({ path: '/login' });
          } else if (isFetchRemote) {
            // 获取菜单权限数据
            api.get_menu_List({}).then(({ data }) => {
              if (data.code == 200) {
                isFetchRemote = false;
                let result = data.data;
                localStorage.setItem('workplaceMenu', JSON.stringify(result));
                getMyRouter(result);
                //根据具有权限的路由名称：myRouter ，按照路由配置的格式配置权限需要的路由
                let myRoutes = [];
                for (var i in myRouter) {
                  myRoutes.push({
                    name: myRouter[i],
                    path: myRouter[i],
                    meta: routerMeta[myRouter[i]],
                    component: routeMap[myRouter[i]]
                  })
                }
                let routeData = {
                  path: "/index",
                  name: "index",
                  component: Index,
                  redirect: '/index/workplace',
                  children: myRoutes
                }
                 //将动态配置好的路由：routeData添加到当前路由中，并添加404页面
                router.addRoutes([routeData].concat([
                  { name: '404', path: '/404', component: Forbidden },
                  { path: '*', redirect: '/404' }]));
                router.push({
                  path: to.path,
                  query: to.query
                });
              } else {
                isFetchRemote = false; true
              }
              next();
            })
          } else {
            next();
          }
    
    菜单格式
    
        [
                {
                    id: "menu_0",
                    name: "工作台",
                    icon: "fa fa-dashboard",
                    path: "",
                    state_default: true,
                    isShow: true,
                    child: [
                        {
                            id: "menu_0_1",
                            name: "首页",
                            icon: "fa fa-dashboard",
                            path: "workplace",
                            toolData: [],
                            state_default: true,
                            isShow: true,//用于设置是否具有权限
                        }
                    ]
                },
                {
                    id: "menu_5",
                    name: "项目",
                    path: "/jz",
                    icon: "fa fa-product-hunt",
                    path: "",
                    isShow: true,
                    child: [],
                },
        ......
        ]