转载   原文作者：伍华聪 原文地址：https://www.cnblogs.com/wuhuacong/p/12971415.html

在我开发的很多系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单一般包括有名称、图标、顺序、URL连接等相关信息，对于VUE+Element 前端应用来说，应该原理上差不多，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展示的处理。

1、菜单和路由的处理过程

由于Vue前端还需要引入路由这个概念，路由是我们前端可以访问到的对应路径集合，路由定义了常规菜单说没有的很多复杂信息，但是往往这些是我们不能随意修改的，因此我们做法是以本地配置好的路由列表为基准，而菜单我们采用在后端配置方式，前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操作过程如下所示：

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念如下所示。

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

2、菜单和路由列表

根据前面的介绍，我们定义了一些从服务端返回的动态菜单信息，这些菜单信息是一个JSON对象集合，如下界面所示。

[
  { id: '1', pid: '-1', text: '首页', icon: 'dashboard', name: 'dashboard'
  },
  { id: '2', pid: '-1', text: '产品列表', icon: 'table', name: 'product'
  },
  { id: '3', pid: '-1', text: '一级菜单', icon: 'example', children: [ { id: '3-1', pid: '3', text: '二级菜单1', name: 'icon', icon: 'example' }, { id: '3-2', pid: '3', text: '二级菜单2', icon: 'tree', children: [ { id: '3-2-1', pid: '3-2', text: '三级菜单1', name: 'form', icon: 'form' }, { id: '3-2-2', pid: '3-2', text: '三级菜单2', name: 'menu1-1', icon: 'form' }, { id: '3-2-3', pid: '3-2', text: '三级菜单3', name: 'menu1-2', icon: 'form' }, { id: '3-2-4', pid: '3-2', text: '三级菜单4', name: 'menu1-3', icon: 'form' } ] } ]
  },
  { id: '99', pid: '-1', text: '公司官网', icon: 'table', name: 'external-link'
  }
]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
 

菜单的JSON是根据角色进行动态获取的，不同的角色对应不同的菜单集合，并且菜单是一个多层次的树列表，可以定义无穷多级的展示，JSON格式化视图如下所示。

而Vue前端需要初始化定义前端页面的所有路由，这些包括路由页面的Layout等信息。

我们可以在一个JS文件里面定义好对应前端所有的路由信息，如下所示:

// 定义本系统的所有路由，具体路由呈现经过菜单数据过滤
export const asyncRoutes = {
  'dashboard': { path: '/dashboard', component: Layout, children: [{ path: 'dashboard', name: 'dashboard', component: () => import('@/views/dashboard/index') }]
  },
  'product': { path: '/product', component: Layout, children: [{ path: '/product', name: 'product', component: () => import('@/views/Product/index') }]
  }, .............................. //省略部分 'icon': { path: '/icon', component: Layout, children: [{ path: '/icon', name: 'icon', component: () => import('@/views/icons/index') }]
  }, 'external-link': { path: 'http://www.iqidi.com', name: 'external-link'
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

这里的路由不需要嵌套，因为菜单展示才需要定义嵌套关系。

另外，由于系统在未登录请求后端动态菜单前，我们系统也需要正常运行起来，那么就需要预设一些基础的路由信息，如登录界面、重定向页面、首页链接等这些路由信息，因此我们可以分开两个路由对象，用来分开管理这些信息。

对路由的管理，一个需要默认创建路由的处理、重置路由的处理，以及动态设置新的路由处理，我们封装几个函数来处理这些操作。

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

  

 

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

用户在经过登录界面处理后，就会通过对应的Action获取动态路由信息（注意，这里是先获取动态菜单，然后过滤本地路由，即为动态路由信息），获得动态路由后，就设置前端所能访问的路由集合即可，如下代码所示。

有了这些新的路由允许，前端系统的菜单才能够正常运转起来，否则即使界面展示了菜单，也不能访问特定的视图页面而跳到了404页面，因为路由没有。

3、登录的过程处理

前面大概介绍了路由的处理过程，其实我们路由信息，应该需要从登录界面开始讲起。

以登录界面为例，在用户登录处理后，需要先验证用户的账号密码，成功后继续请求该用户对应的动态菜单集合，并通过路由切换到对应的页面或者首页。

在Store/Modules/user.js模块里面，定义了对应的登陆处理Action，如下所示:

我们这里忽略用户登录的检验和处理token的过程，主要关注动态菜单请求并设置路由的过程。

在我们需要拦截路由到达前的处理中，我们定义对应的路由信息请求逻辑，如下所示。

router.beforeEach(async(to, from, next) => {

  

 

  
1
 

在处理菜单路由的对应模块里面，我们定义了一个状态用来承载这些重要信息，如下定义State所示。

const state = {
  menuItems: [],
  routes: [],
  addRoutes: [],
  asyncRoutes: asyncRoutes
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

// 定义了路由和菜单的Mutation
const mutations = {
  SET_ROUTES: (state, routes) => { // var list = convertRoute(routes) routes.push({ path: '*', redirect: '/404', hidden: true }) // 此为默认错误路由 state.addRoutes = routes state.routes = [].concat(routes)// constantRoutes.concat(routes)
  },
  SET_MENUS: (state, menus) => { state.menuItems = menus
  }
}

  

 

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

// 定义了生成动态路由的Action处理
const actions = {
  generateRoutes({ commit }, roles) { return new Promise(resolve => { getMenus().then(res => { const menus = res.data || [] // 统一通过接口获取菜单信息 const routes = [] menus.forEach(item => { filterRoutes(routes, item) }) console.log(routes)// 打印路由 commit('SET_ROUTES', routes) commit('SET_MENUS', menus) resolve(routes) }); })
  }
}

  

 

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

最后返回对应的JS定义模块类信息即可。

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

我们来看看界面生成的动态菜单效果。

由于菜单动态展示和动态路由配合，因此既能在前端实现动态菜单的展示，又会根据菜单的集合刷新可访问路由，两者结合就可以顺利打开对应的视图页面了。

再来回顾一下，菜单路由处理的大概的操作过程如下所示

文章来源: blog.csdn.net，作者：三分恶，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/sinat_40770656/article/details/109477237