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:
Cumbersome
: You need to set parameters twice, and if you want to override module parameters with project parameters, you need to do it twiceInconsistent
: 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// eslint-disable-next-line
- 2module.exports = appInfo => {
- 3 const config = {};
- 4
- 5 // configFront
- 6 config.configFront = {
- 7 local: {
- 8 disabled: false,
- 9 },
- 10 };
- 11
- 12 return config;
- 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...
- 2const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
- 3...
- 4// local.disabled
- 5const configModule = ctx.config.module(moduleInfo.relativeName);
- 6if (ctx.app.meta.isLocal && configModule.configFront.local.disabled) {
- 7 // next
- 8 return await next();
- 9}
- 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# current module
- 2const disabled = this.$config.local.disabled;
- 3# cross module
- 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 // module config
- 2 config.modules = {
- 3 'a-captcha': {
- 4 configFront: {
- 5 local: {
- 6 disabled: true,
- 7 },
- 8 },
- 9 },
- 10 };
Comments: