In the previous section, we have implemented a basic process of frontend and backend development. The backend has provided an API route, and the frontend has provided a page component.

In this chapter, we are going to add a menu and give the menu corresponding permissions. When a user with permission enters the system, will see the menu on the home page

Resource & API Route

CabloyJS is the framework of frontend and backend separation. The separation of frontend and backend puts forward higher requirements for the right control of backend API routes. Therefore, the core of permission is to control the permission of backend API route

The purpose of API route is to provide corresponding API service to the frontend, which called as resource. Thus, one or more API routes corresponds to a resource

In practice, it aims at resource authorization, and then specifies which resource the API route corresponds to, so as to realize access control to API route

Resource & Menu

Menu is one type of Resource

Declaration of Menu

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 Menu Title
atomStaticKey Menu Key: used to uniquely identify a resource. The system will automatically append the module name prefix, and the complete key is: test-party:appComponentsGuide
atomRevision Revision
atomCategoryId The category to which the menu belongs. Specify a complete directory path here, and the system will automatically resolve it to category id
resourceType Resource Type: The type of Menu is a-base:menu
resourceConfig Resource Config: Different types of resources have different structure conventions
resourceConfig.actionModule + actionPath When clicking the menu item, jump to the path of the front page
resourceIcon Menu Icon
appKey The app that the menu belongs to, here is test-party:appComponents
resourceRoles Specify resource authorization object: it can be multiple roles
resourceSorting Menu display order

Authorization Checking

Authorization can be checked by middleware or API. Here we only demonstrate the checking method of middleware:

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},
Name Description
meta the metadata of route, which can specify parameters related to middleware
right parameters of middleware right
type authorization type, here is resource
module+name The name of the resource to be authenticated, which also is the atomStaticKey of the menu resource. If it is the current module, the module can be omitted

The middleware right is a global middleware, specifically used for authorization checking