vue项目实现权限控制的几种思路

一、前言

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