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

Function & Menu

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

Function & API Route

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

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

Function & Menu

Menu is a special case of Function:

  1. First of all, Menu also corresponds to one or more API routes, which is authorized in the same way as Function

  2. Secondly, by setting the attribute menu of function to 1, it becomes a menu. At the same time, by specifying a path of frontend page component, a menu link can be displayed on the home page

Declaration of Menu

Each business module has a metadata object named as meta, in which we can declare a menu


const meta = {
  base: {
    functions: {
      kitchenSink: {
        title: 'Kitchen-sink',
        scene: 'tools',
        actionPath: 'kitchen-sink/index',
        sorting: 1,
        menu: 1,
Name Description
title menu’s title. If want to support i18n, can add the corresponding language resources directly
scene menu’s scene. Classified display for menus
actionPath path of frontend page component
sorting sorting for display
menu whether menu or not. If not menu, then function

API Route


{ method: 'post', path: 'kitchen-sink/guide/echo9', controller: testKitchensinkGuide,
  meta: {
    right: {
      type: 'function',
      name: 'kitchenSink',
Name Description
meta the metadata of route, which can specify parameters related to middleware
right parameters of middleware right
type authorization type, here is function
name function name

Menu Authorization

CabloyJS uses a whitelist policy for menu authorization, and all authorizations must be explicitly set

There are three ways to authorize menus:

  1. Artificial Authorization: If certain permissions can only be determined at actual deployment or runtime, authorization operations can be performed through the management pages
  2. Initial Authorization: If need to initialize permissions while the system is starting, can assign permissions through the backend API route version/init. For example, assign permissions to the role of superuser
  3. Test Authorization: In order to facilitate testing and development, permissions can also be initialized through the backend API route version/test in the development stage. For example, assign permissions to certain test roles

Here, we assign a permission to the role root through initial authorization, so as to access the menu kitchenSink


async init(options) {
  if (options.version === 3) {
    // roleFunctions
    const roleFunctions = [
      { roleName: 'root', name: 'kitchenSink' },
    await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions });
Name Description
options.version module’s data version. When the module is compiled and released, the current data Version of the module is recommended to be closed. If there is a new data architecture change, increment the data version. In this way, with the upgrading of business module, the data architecture within the module will also be seamlessly upgraded