前面我们实现了一个前后端联动的基本流程,后端提供了一个API路由,前端提供了一个页面组件。本章节,我们准备添加一个菜单,并给菜单赋予相应的权限。当某个具备权限的用户进入系统,可以在首页看到此菜单

资源API路由的关系

CabloyJS是前后端分离的框架。前后端分离对后端路由的权限控制提出了更高的要求。因此,权限的核心就是对后端API路由的权限控制

API路由的目的是向前端提供相应的API服务,在这里我们称之为资源。于是,一个或多个API路由对应一个资源

在实际操作中,是针对资源授权,然后在API路由中指定此路由对应哪个资源,从而实现对API路由的访问控制

资源菜单的关系

菜单是一种资源

定义菜单资源

src/suite-vendor/test-party/modules/test-party/backend/src/config/static/resource/menus.js

  1. 1module.exports = app => {
  2. 2 const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 const resources = [
  4. 4 // menu
  5. 5 {
  6. 6 atomName: 'Guide',
  7. 7 atomStaticKey: 'appComponentsGuide',
  8. 8 atomRevision: 0,
  9. 9 atomCategoryId: 'a-base:menu.General',
  10. 10 resourceType: 'a-base:menu',
  11. 11 resourceConfig: JSON.stringify({
  12. 12 actionModule: moduleInfo.relativeName,
  13. 13 actionPath: 'kitchen-sink/guide',
  14. 14 }),
  15. 15 resourceIcon: '::book',
  16. 16 appKey: 'test-party:appComponents',
  17. 17 resourceRoles: 'root',
  18. 18 resourceSorting: 2,
  19. 19 },
  20. 20 ];
  21. 21 return resources;
  22. 22};
名称 说明
atomName 菜单标题
atomStaticKey 静态Key,用于唯一标识资源。系统会自动追加模块名称前缀,完整的Key是:test-party:appComponentsGuide
atomRevision 数据的修订号
atomCategoryId 菜单所属目录。这里指定完整的目录路径,系统会自动解析成Id
resourceType 资源类型:菜单是a-base:menu
resourceConfig 资源配置信息:不同类型的资源有不同的结构约定
resourceConfig.actionModule + actionPath 当点击菜单项时,跳转前端页面的路径
resourceIcon 菜单图标
appKey 菜单所归属的App应用,这里是test-party:appComponents
resourceRoles 指定资源授权对象:可以是多个角色
resourceSorting 菜单显示顺序

授权判断

可以通过中间件Api进行授权的判断,这里仅演示中间件的判断方式:

src/suite-vendor/test-party/modules/test-party/backend/src/routes.js

  1. 1{
  2. 2 method: 'post',
  3. 3 path: 'kitchen-sink/guide/echo9',
  4. 4 controller: 'testKitchensinkGuide',
  5. 5 meta: {
  6. 6 right: { type: 'resource', name: 'appComponentsGuide' },
  7. 7 },
  8. 8},
名称 说明
meta 是路由的元数据,可以指定与中间件相关的参数
right 中间件right的参数
type 授权类型,这里是资源授权
module+name 需要进行授权验证的资源名称,即菜单资源的atomStaticKey。如果是当前模块,module可以省略

中间件right是全局中间件,专门用于授权验证