2024年最新vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui，高级前端开发必看

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

项目地址：github.com/cgq001/vue-…

欢迎star, 留着也许就用到了，毕竟权限管理 还是很普遍的嘛

使用到的规则

1、动态设置权限的UI展示

这里使用element-ui的Three树形控件,数据结构如下：

data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }]
复制代码

这里选择这个树形控件，是因为其数据结构和我们的 注册路由信息结构十分接近，不需要再重新修改路由信息的数据结构，即可完美的 展现在 Three树形控件里

2、将侧边导航所需要的路由信息对象 抽离成一个数组，根据后台返回的数组，筛选出对应的路由信息，通过addRoutes添加到路由信息对象里，即可完成路由信息的动态添加

详情

// 在router.js 路由文件 新建数组路由存储 '/'  父路由下的所有子路由(这里所有的动态路由均为 '/' 的子路由)
let routerLists=[ 
  {
    id:1,
    path: '',
    label: '首页',
    redirect: '/index',  //重定向到
    meta:{
      title: '首页',
      table: true,
      display: false,
      icon: 'el-icon-s-home'
    }
  },
  {
    id: 2,
    path: '/index',   
    name: 'index',
    label: '首页',
    component: _import('Index/Index'),
    meta:{
      title: '首页',
      table: true,
      display:true,
      icon: 'el-icon-s-home'
    }
  },
  {
    id: 3,
    path: '/shop',
    name: 'shop',
    label: '商品管理',
    component: _import('Shop/Shop'),
    meta:{
      title: '商品列表',
      table: true,
      display:true,
      icon: 'el-icon-s-operation'
    }
  },
  {
    id:20,
    path: '/admin',
    label: '管理员列表',
    component: _import('admin/index'),
    meta:{
        title: '管理员列表',
        table: true,
        display:true,
        icon: 'el-icon-s-custom'
    },
    children:[
      {
        id:21,
        path: '/admin/index',
        label: '管理员列表',
        component: _import('admin/admin'),
        meta:{
          title: '管理员列表',
          table: true,
          display:true,
          icon:'el-icon-tickets'
        }
      },
      {
        id:22,
        path: '/admin/adminlist',
        label: '添加管理员',
        component: _import('admin/adminlist'),
        meta:{
          title: '添加管理员',
          table: true,
          display:true,
          icon:'el-icon-document-remove'
        }
      }
    ]
  }
]

//定义 上面数组的父路由
let routerAlls=[   //这里为routerLists的父路由
        {
          path: '/',
          component: Home
        }
]

1 .权限配置表
// 先把路由信息对象字符串化，然后去除component字段 ，再传递给 权限配置表
 let routerListString =JSON.stringify(routerLists)
 let src= routerListStr(routerListString)
 store.commit('serRouterList',src)

 let arr=[1,2,3,20,21,22]   //这里为权限列表数组(既后台根据用户身份返回的对应的路由数组)

 //根据权限配置表(arr数组)和动态路由信息对象(routerLists数组) 获取本用户的路由信息表，并添加到 routerAlls 路由的二级路由里
 
 2.获取动态路由
 
routerAlls[0].children = routerListFun(arr,routerLists)  
//获取 路径 '/' 的子路由，并添加至 routerAlls   这里的  routerListFun函数 为 根据权限列表数组（arr）筛选动态路由信息对象（routerLists） PS：函数内容见 文章末尾：附录


3.获取侧边导航栏 的 渲染菜单 数组

//根据权限配置表数组（arr）和动态路由信息对象（routerLists） 获取本用户的菜单列表
let mentParse =JSON.parse(JSON.stringify(src))
let menuList = routerListFun(arr,mentParse)   //这里routerListFun函数注意去除返回数组中的component
store.commit('setMents',menuList)   //将其添加到vuex  


// 注册路由
let routers =new Router({
  mode: 'history',
  // base: process.env.BASE_URL,
  routes: [
    {
      path: '/loading',
      name: 'loading',
      component: () => import('../views/Load/Loading.vue'),
      meta:{
        title: '登陆',
        table: false
      }
    }
  ]
})

// 将筛选后的路由信息对象添加至路由表
routers.addRoutes(routerAlls)


// 进行全局导航守卫
routers.beforeEach((to,from,next)=>{
    
      if(to.path != '/loading'){
          
          let username=store.state.load.userList.username
          
          if(username){
            next()
          }else{

            next({
              path:'/loading',
              query:{
                path:to.path
              }
            }) 
          }
      }else{
        next()
      }   
})

export default routers;
复制代码

附录

1.动态路由书写规则

* 路由书写规则
#### 总结一下



面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://i-blog.csdnimg.cn/blog_migrate/60cb7c1b74474d7e5a5546cc285d7586.png)



![](https://i-blog.csdnimg.cn/blog_migrate/8bb05c431555e98a9a843fe5fa668b9d.png)



**前端面试题汇总**



![](https://i-blog.csdnimg.cn/blog_migrate/0e3e725c2b52c0d80cc380a18efe5fd9.png)

**JavaScript**



![](https://i-blog.csdnimg.cn/blog_migrate/9320ddadc20aa9901f6059017c06bce9.png)



**性能**

![](https://i-blog.csdnimg.cn/blog_migrate/80f436616b3456a1e3fabb96c355d408.png)



**linux**



![](https://i-blog.csdnimg.cn/blog_migrate/9ddd13c78eef6f7bdd7d52f641a2ff76.png)



**前端资料汇总**

![](https://i-blog.csdnimg.cn/blog_migrate/76efd569a51c5aef0b8848e79c9e7dd7.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。