一、前言
部门现在的新系统的前端都是使用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
数组，前端只需要根据返回的数据，遍历路由，就可以实现路由的权限控制。这种方式和第一种方式的思路有点像，但是比较简单，不需要重新在前端重新解析和构建路由树。相对于第二种方式来说，安全性更高一点，因为权限控制最安全的做法还是后端来进行控制。