Background

We know that CabloyJS supports cross-end development in multiple scenarios. It is inevitable that different scenarios and terminals may need to configure different frontend config parameters, such as the following:

  1. Use different frontend parameters for different roles
  2. Use different frontend parameters for different users

Backend Event：loginInfo

When the page is initialized, the frontend will call the backend API interface /a/base/auth/echo to return the information of the current user. This API interface raises a backend event loginInfo. Other modules can respond to this event and provide some customized information to the frontend

Next, we will take the module test-party as an example to demonstrate how to respond to backend event, and then provide customized config parameters to the frontend

For a complete description of backend event, see also: Backend Event

Declare Event implementation

test-party/backend/src/meta.js

  1. 1event: {
  2. 2  implementations: {
  3. 3    'a-base:loginInfo': 'loginInfoDashboard',
  4. 4  },
名称 说明
a-base:loginInfo Event’s full name: moduleName:eventName
loginInfoDashboard Bean Component of Event

Define Bean Component of Event

In this example, respond to the backend event a-base:loginInfo

src/suite-vendor/test-party/modules/test-party/backend/src/bean/event.loginInfoDashboard.js

  1. 1const require3 = require('require3');
  2. 2const extend = require3('@zhennann/extend');
  3. 3
  4. 4module.exports = ctx => {
  5. 5  // const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
  6. 6  class EventBean {
  7. 7    async execute(context, next) {
  8. 8      const data = context.data;
  9. 9      const info = data.info;
  10. 10      info.config = extend(true, info.config, {
  11. 11        modules: {},
  12. 12      });
  13. 13      // next
  14. 14      await next();
  15. 15    }
  16. 16  }
  17. 17
  18. 18  return EventBean;
  19. 19};
Name Description
context.data Incoming parameters
next The event adopts the onion ring model and calls next to allow the execution of other bean component
info.config Append the customized config parameter to info.config, and the info data will be returned to the frontend, thus overriding the corresponding config parameter of the frontend

Register Bean Component of Event

The bean component defined above needs to be registered in the beans.js of the module

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

  1. 1const eventLoginInfoDashboard = require('./bean/event.loginInfoDashboard.js');
  2. 2
  3. 3module.exports = app => {
  4. 4  const beans = {
  5. 5    // event
  6. 6    'event.loginInfoDashboard': {
  7. 7      mode: 'ctx',
  8. 8      bean: eventLoginInfoDashboard,
  9. 9    },
  10. 10  };
  11. 11  return beans;
  12. 12};
Name Scene Module global beanFullName
loginInfoDashboard event test-party false test-party.event.loginInfoDashboard