Background

There is a scenario where a config parameter is used at both the frontend and backend of the module. The general solution is to set the config parameter on the frontend and backend of the module respectively. This implementation has the following two problems:

  1. Cumbersome: You need to set parameters twice, and if you want to override module parameters with project parameters, you need to do it twice
  2. Inconsistent: Because the config parameter on the backend supports different settings at the instance level, and the frontend does not have an instance level setting mechanism, the config parameter values on the frontend and the backend are inconsistent

Backend Override Frontend

CabloyJS defines a configFront node separately in the backend config. The config parameter configured through this node will be automatically sent to the frontend and merged with the config parameter of the frontend, thus easily solving the two problems mentioned above

For example, we want to enter the system without entering the verification code on the login page in the local development environment. The verification code mechanism is provided by module a-captcha. Let’s see how module a-captcha handles it

1. configFront

src/module-system/a-captcha/backend/src/config/config.js

  1. 1// eslint-disable-next-line
  2. 2module.exports = appInfo => {
  3. 3 const config = {};
  4. 4
  5. 5 // configFront
  6. 6 config.configFront = {
  7. 7 local: {
  8. 8 disabled: false,
  9. 9 },
  10. 10 };
  11. 11
  12. 12 return config;
  13. 13};
Name Description
local.disabled Whether to disable the verification code mechanism in the local development environment

2. Access config parameter at backend

src/module-system/a-captcha/backend/src/bean/middleware.captchaVerify.js

  1. 1...
  2. 2const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3...
  4. 4// local.disabled
  5. 5const configModule = ctx.config.module(moduleInfo.relativeName);
  6. 6if (ctx.app.meta.isLocal && configModule.configFront.local.disabled) {
  7. 7 // next
  8. 8 return await next();
  9. 9}
  10. 10...

First check whether it is in the local development environment, and then check whether configFront.local.disabled is true. If both are true, skip the verification phase and call next directly

3. Access config parameter at frontend

  1. 1# current module
  2. 2const disabled = this.$config.local.disabled;
  3. 3# cross module
  4. 4const disabled = this.$meta.config.modules['a-captcha'].local.disabled;

That is to say, the access mode of frontend config parameters is still used. See also: Module Frontend Development - Config

4. Override Module Config

Because the parameter configFront.local.disabled is set on the backend of module a-captcha, and the default value is false. If we want to set this value to true, we need to override the module parameters through the project parameters

src/backend/config/config.local.js

  1. 1 // module config
  2. 2 config.modules = {
  3. 3 'a-captcha': {
  4. 4 configFront: {
  5. 5 local: {
  6. 6 disabled: true,
  7. 7 },
  8. 8 },
  9. 9 },
  10. 10 };

See also: Backend Configuration - Override Module Config