Vue-element-admin: 大神，您好，可以做到权限可视化配置吗？

Created on 22 Jul 2018 · 12Comments · Source: PanJiaChen/vue-element-admin

实际项目中权限分配不应该写死，还是应该从后台传过来权限，动态生成asyncRouterMap，因为无论前端做任何操作，最终还是需要后端进行权限判断

PR Welcome RFC

Source

tangkepeng

Most helpful comment

我快完成第三版的权限管理系统（Token Server）了，到时候可以分享一下，PR可能有点困难，因为牵扯到后端太多东西，而且后端是.Net的Web Api写的，不一定符合很多人的需求。

大致思路是这样的：

实现OAuth 2 的Resource Own Password Credential Grant Flow和Client Credential Grant Flow，主要是为了SPA和Mobile Client Issue Token，Refresh Token以及Web API的保护。支持多客户端，多应用。

实体基本分为：

App相关：App, Role, Resource, Operation, Permission, Menu
OAuth相关：Client, Scope
App里可以定义多个Role
一个Role有一组Permission
每个Permission由 Resource + Operation 组合（例如 User + View，或者User + Edit）
Role和Menu为多对多关系

前端登陆以后，请求到后端签发的Access Token (Token Type = JWT)，Token里有当前用户的Role，通过当前用户的Role从后端请求一组Menu，从而实现菜单根据Role加载。

在后端每一个Action上都用Attribute标记访问权限例如 [ClaimPrinciple(Operation="View", Resource="User")]，这样的话，就可以动态配置各种Role的Permission组合。

有兴趣欢迎探讨，谢谢。

jinweijie on 24 Jul 2018

👍14

All 12 comments

还是需要看需求的，每个业务都是不一样的。

因为无论前端做任何操作，最终还是需要后端进行权限判断

后端和前端判断的权限本来就不是一个东西。

本项目暂时应该不会加权限可视化配置，欢迎pr。

PanJiaChen on 23 Jul 2018

大致思路是这样的：

实体基本分为：

App相关：App, Role, Resource, Operation, Permission, Menu
OAuth相关：Client, Scope
App里可以定义多个Role
一个Role有一组Permission
每个Permission由 Resource + Operation 组合（例如 User + View，或者User + Edit）
Role和Menu为多对多关系

在后端每一个Action上都用Attribute标记访问权限例如 [ClaimPrinciple(Operation="View", Resource="User")]，这样的话，就可以动态配置各种Role的Permission组合。

有兴趣欢迎探讨，谢谢。

jinweijie on 24 Jul 2018

👍14

我快完成第三版的权限管理系统（令牌服务器）了，到时候可以分享一下，PR可能有点困难，因为牵扯到后端太多东西，而且后端是.Net的Web Api写的，不一定符合很多人的需求。

大致思路是这样的：

实现OAuth 2的资源自己的密码凭证授权流和客户端凭据授权流程，主要是为了SPA和移动客户端问题令牌，刷新令牌以及Web API的保护。支持多客户端，多应用。

实体基本分为：

App相关：App，角色，资源，操作，权限，菜单

OAuth相关：客户，范围

应用程序里可以定义多个角色

一个角色有一组权限

每个权限由资源+操作组合（例如用户+查看，或者用户+编辑）

角色和菜单为多对多关系

前端登陆以后，请求到后端签发的访问令牌（令牌类型= JWT），令牌里有当前用户的角色，通过当前用户的角色从后端请求一组菜单，从而实现菜单根据角色加载。

在后端每一个Action上都用属性标记访问权限例如[ClaimPrinciple（Operation =“View”，Resource =“User”）]，这样的话，就可以动态配置各种Role的Permission组合。

有兴趣欢迎探讨，谢谢。

弱弱问下你这个根据role请求回来的菜单是在这个模版的基础上渲染的吗还是重写的sidebar组件啊

oiovwv on 20 Nov 2018

@oiovwv 可以复用一部分，不过逻辑要修改的

jinweijie on 21 Nov 2018

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

IssueHuntBot on 3 Dec 2018

没空整理，简单提示下，希望有帮助。改几个核心地方就可以了：

store/modules/permission.js

function hasPermission(permissions, route) {
  if (route.meta && route.meta.permissions) {
    return route.meta.permissions.every(permission => permissions.includes(permission))
  } else {
    return true
  }
}

前提是服务器端加个获取用户permission的接口，如果需要结合role来一起过滤的话就在接口里一起返回