如何在Aura组件中引用Custom Metadata或Custom Label存储的外部资源URL

以下为两种常用实现路径，你可以根据自身的配置管理需求选择：

方案1：使用Custom Label存储（轻量快捷，适合固定资源配置） #

操作步骤：

• 进入Salesforce设置界面，搜索「Custom Label」新建3个自定义标签：
  • 自定义标签1：名称Greenid_Config_JS_URL，值填https://simpleui-test-au.vixverify.com/df/javascripts/greenidConfig.js
  • 自定义标签2：名称Greenid_UI_JS_URL，值填https://simpleui-test-au.vixverify.com/df/javascripts/greenidui.min.js
  • 自定义标签3：名称Greenid_Mobile_CSS_URL，值填https://simpleui-test-au.vixverify.com/df/assets/stylesheets/greenid-mobile.css
• 修改.cmp文件的<ltng:require>代码，直接通过表达式引用自定义标签即可：

<ltng:require scripts="{!join(',',
                           $Label.c.Greenid_Config_JS_URL,
                           $Label.c.Greenid_UI_JS_URL)}"
                  afterScriptsLoaded="{! c.onLoadScript }"/>

<ltng:require styles="{!$Label.c.Greenid_Mobile_CSS_URL}"/>

方案2：使用Custom Metadata存储（适合多环境批量管理、有扩展配置需求的场景） #

注意：Aura组件表达式无法直接读取Custom Metadata，需要先通过Apex控制器查询返回给前端使用，操作步骤如下：

1. 新建Custom Metadata Type：

• 进入设置搜索「Custom Metadata Types」，新建类型命名为External_Resource_Setting__mdt，新增一个URL类型的自定义字段Resource_URL__c
• 新建3条Custom Metadata记录，分别对应3个资源，开发名分别为Greenid_Config_JS、Greenid_UI_JS、Greenid_Mobile_CSS，Resource_URL__c字段填入对应资源链接

2. 编写Apex控制器方法查询配置：

public class AuraResourceController {
    @AuraEnabled
    public static Map<String, String> getExternalResourceUrls() {
        Map<String, String> urlMap = new Map<String, String>();
        List<External_Resource_Setting__mdt> resourceList = [SELECT DeveloperName, Resource_URL__c FROM External_Resource_Setting__mdt];
        for(External_Resource_Setting__mdt res : resourceList) {
            urlMap.put(res.DeveloperName, res.Resource_URL__c);
        }
        return urlMap;
    }
}

3. 修改Aura组件代码：
   首先在.cmp文件中定义属性、绑定控制器：

<aura:component controller="AuraResourceController">
    <aura:attribute name="resourceUrlMap" type="Map" default="{}"/>
    <aura:handler name="init" value="{!this}" action="{!c.loadResourceUrls}"/>

    <!-- 其他组件代码 -->
    <ltng:require scripts="{!join(',',
                           v.resourceUrlMap.Greenid_Config_JS,
                           v.resourceUrlMap.Greenid_UI_JS)}"
                  afterScriptsLoaded="{! c.onLoadScript }"/>
    <ltng:require styles="{!v.resourceUrlMap.Greenid_Mobile_CSS}"/>
</aura:component>

然后在controller.js中添加初始化调用方法：

({
    loadResourceUrls : function(component, event, helper) {
        let action = component.get("c.getExternalResourceUrls");
        action.setCallback(this, function(response) {
            let state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.resourceUrlMap", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    onLoadScript : function(component, event, helper) {
        // 原有脚本加载完成后的逻辑
    }
})

注意：两种方案都需要先将资源所在域名添加到Salesforce的CSP受信任站点中，否则浏览器会拦截外部资源加载

内容的提问来源于stack exchange，提问作者newbiedev