在我开发的很多系统里面,包括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'
}
]

菜单的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'
}
}

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

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

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

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
}

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

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

3、登录的过程处理

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

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

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

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

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

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

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

const state = {
menuItems: [],
routes: [],
addRoutes: [],
asyncRoutes: asyncRoutes
}
// 定义了路由和菜单的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
}
}
// 定义了生成动态路由的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)
});
})
}
}

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

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

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

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

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

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

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...

  2. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  3. 循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  4. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  5. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  6. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  7. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  8. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  9. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  10. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

随机推荐

  1. OpenRASP管理后台安装记录

    OpenRASP项目地址https://rasp.baidu.com/ 一.安装java 在CentOS中安装ElasticSearch需要Java1.8.0,可执行命令java -version查看 ...

  2. python selenium(定位方法)

    一.定位方法 注意:元素属性必须唯一存在 #id定位 find_element_by_id() #name定位 find_element_by_name() #class_name定位 find_el ...

  3. postman(介绍)

    Postman 界面介绍 一. 安装后首次打开 postman,会提示你是否需要登录,登录的话可以云端保存你的收藏及历史记录,不登陆不影响使用.   二. 进入后就是如下图所示的界面了.看到这么多按钮 ...

  4. 一个epoll的简单例子

    epoll事件机制的触发方式有两种:LT(电平触发)和ET(边沿触发) EPOLLIN事件: 内核中的socket接收缓冲区 为空(低电平) 内核中的socket接受缓冲区 不为空(高电平) EPOL ...

  5. .NET Core 反编译dll源码查看

    一.可以通过JetBrains dotPeek进行反编译 二.可以通过.NET Reflector和VS自带的反编译工具查看

  6. 看直播 csust oj

    看直播 Description 小明喜欢看直播,他订阅了很多主播,主播们有固定的直播时间 [Li, Ri] . 可是他网速只有2M,不能同时播放两个直播,所以同一时间只能看一个直播. 并且他只会去看能 ...

  7. 基于胜率矩阵的PageRank排序

      在做博弈模型评估的时候,遇到一个问题是如何评价多个模型的优劣.例如我有训练好的三个围棋模型A,B,C,两两之间对打之后有一个胜负关系,如何对这三个模型进行排序呢?通常对于人类选手这种水平有波动的情 ...

  8. 【Hadoop离线基础总结】Hue与Impala集成

    Hue与Impala集成 1.修改hue.ini配置文件 [impala] server_host=node03 server_port=21050 impala_conf_dir=/etc/impa ...

  9. docker环境中neo4j导入导出

    neo4j 官方文档有说明,使用 neo4j-admin restore / dump 导出和恢复数据库的时候需要停掉数据,否则会报数据库正在使用的错误:command failed: the dat ...

  10. X Error:BadDrawable (individ Pixmap or Window parameter 9)

    #描述 平台:aarch64 系统:ubuntu16.04.02 Qt Version:4.8.7 Qt程序可以正常运行,界面渲染出现问题以及乱码,控制提示错误内容: "unable to ...