Web前端最全vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui(1)，一文全懂_vue权限列表渲染

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

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添加到路由信息对象里，即可完成路由信息的动态添加


#### 详情



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 在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()
  }   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

})

export default routers;
复制代码

#### 附录



> 
> 1.动态路由书写规则
> 
> 
> 



1
2
3
4
5
6
7
8
9
10
11
12
13

• 路由书写规则
• 1、只有一级路由（实际为二级路由）：

• {
     id: 2,                                  //ID全局不能重复
     path: '/index',                         //路由路径 全局不能重复
     name: 'index',                          //名字，全局不能重复，存在二级路由，则一级路由不能有名字
     label: '首页',                          // 页面名称(用于权限配置时 显示名称使用)
     component: _import('Index/Index'),      // 文件地址（此处对应的是views目录）
     meta:{
       title: '首页',                        //页面名称（横向teble标签切换）
       table: true,                          // 是否显示 teable 切换按钮
       display:true,                         //  是否在侧边导航菜单显示
       icon: 'el-icon-s-home'                //  侧边导航的icon图标
     }
   }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  2、包含二级路由（实际为三级路由）
  {
  id:20, //ID全局不能重复
  path: ‘/admin’, //路由路径 全局不能重复(此处为父级))
  label: ‘管理员列表’, // 页面名称(用于权限配置时 显示名称使用)
  component: _import(‘admin/index’), // 文件地址（此处对应的是views目录）注意：此文件下 应包含（router-view 标签 来显示子页面）
  meta:{
  title: ‘管理员列表’, //页面名称（横向teble标签切换）

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。