一、前言
部门现在的新系统的前端都是使用vue语言,前端管理系统用的框架都是element提供的vue-element-admin模板框架。只是针对公司业务,做了一些修改。其中权限控制模块用的比较频繁,所以今天就谈谈我们前端的vue项目权限控制是如何实现的。
二、vue项目的权限控制思路
权限控制分为菜单权限控制、按钮权限控制和请求url权限控制三大块。按钮权限控制比较容易,主要采取的方式是从后端返回按钮的权限,然后在前端进行显隐操作。url权限控制,主要是后端代码来控制,前端只需要规范好格式即可。剩下的菜单权限控制,是相对复杂一些的,下面主要针对菜单的权限控制来说明实现思路。
1、权限路由全部存到数据库
思路:设计一个路由数据库表,将需要进行权限控制的路由全部存到数据库中,然后当成一个资源表,分配给对应的角色。用户登录时,根据角色,查询对应的路由信息,返回前端,存到vuex
的state
中和存档本地的localStorage
中(存到本地缓存是防止频繁向后台请求路由。因为每次页面刷新,state的中的数据会消失,就需要向后台请求。存到本地缓存可以解决这个问题)。然后进行解析,在router.beforeEach
函数中,通过router.addRoutes(menu)
新增路由。
路由示例:
{
path: '/good',
component: Layout,
redirect: '/good/category',
name: 'Good',
meta: { title: '商品管理', icon: 'example' },
children: [
{
path: '/category',
name: 'category',
component: () => import('@/views/goods/category'),
meta: { title: '商品分类' }
},
{
path: '/goods',
name: 'goods',
component: () => import('@/views/goods/goods'),
meta: { title: '商品列表' }
}
]
}
2、后台只返回角色
思路:这个也是vue-element-admin
提供的一种权限控制方式,前端的每个路由添加对应的角色(具体看下面路由示例的meta中的roles
配置)。后端只需要返回用户的角色,然后根据角色来筛选路由即可。
路由示例:
{
path: '/permission',
component: Layout,
redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
name: 'Permission',
meta: {
title: 'Permission',
icon: 'lock',
roles: ['admin', 'editor'] // you can set roles in root nav
},
children: [
{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'PagePermission',
meta: {
title: 'Page Permission',
roles: ['admin'] // or you can only set roles in sub nav
}
},
{
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'DirectivePermission',
meta: {
title: 'Directive Permission'
// if do not set roles, means: this page does not require permission
}
},
{
path: 'role',
component: () => import('@/views/permission/role'),
name: 'RolePermission',
meta: {
title: 'Role Permission',
roles: ['admin']
}
}
]
3、后端返回路由名称
思路:设计一个简单的路由表,只需要填写路由的name
即可,然后将数据库表中的路由分配给对应的角色。用户登录时,返回路由的name
数组,前端只需要根据返回的数据,遍历路由,就可以实现路由的权限控制。这种方式和第一种方式的思路有点像,但是比较简单,不需要重新在前端重新解析和构建路由树。相对于第二种方式来说,安全性更高一点,因为权限控制最安全的做法还是后端来进行控制。