基于用户权限在Fliplet中实现元素隐藏/显示的问题求助

问题根因 #

1. CSS优先级冲突：你给.adminlink设置了display: none !important，JavaScript动态修改的内联样式优先级低于!important规则，所有显隐操作都会被CSS规则覆盖失效。
2. 原生JS语法错误：document.getElementsByClassName返回的是HTMLCollection元素集合，不是单个DOM节点，直接设置.style.display会抛出语法错误，无法生效。
3. 执行时机遗漏：代码没有等待页面DOM渲染完成就执行，选择器可能找不到目标元素，导致操作无响应。
4. 身份取值兼容问题：只适配了O365登录的session取值路径，没有兼容Fliplet自带登录的取值路径，导致身份判断容易失效。

修正后代码 #

CSS #

.adminlink {
  display: none;
  width: 100%;
}

移除!important规则，保证JS动态修改的内联样式可以生效。

JS #

// 等待Fliplet页面及DOM完全加载后再执行逻辑
Fliplet().then(function () {
  Fliplet.User.getCachedSession().then(function(session) {
    // 可取消下方注释打印会话信息，用于调试取值路径
    // console.log('当前会话完整数据：', session);
    
    // 同时兼容O365登录和Fliplet自带登录的用户身份取值
    var user = _.get(session, 'entries.saml2.user') || _.get(session, 'user.email');
    // 可取消下方注释打印当前用户，校验身份判断是否命中
    // console.log('当前登录用户标识：', user);

    const adminList = ['admin1(已做脱敏处理)', 'admin2(已做脱敏处理)'];
    if (adminList.includes(user)) {
      $('.adminlink').fadeIn(400);
    } else {
      $('.adminlink').hide();
    }
  });
});

不需要混写jQuery和原生DOM操作，统一用jQuery方法即可，同时增加了执行时机判断和多登录场景的取值兼容。

HTML #

保持原有代码不变即可：

<div class="adminlink" id="admin">
  <fl-container cid="xxxxx">
    <fl-list-small-thumbs cid="xxxxx"></fl-list-small-thumbs>
  </fl-container>
</div>

调试校验步骤 #

如果调整后仍然不生效，按以下顺序排查：

1. 打开浏览器控制台，查看打印的用户标识是否和你配置的管理员列表中的值完全匹配，若取值路径错误，调整_.get方法的第二个参数即可。
2. 检查元素的class名是否和代码中选择的.adminlink完全一致，排除拼写错误。
3. 若管理员身份存储在Fliplet数据源中，可将硬编码的管理员列表替换为数据源查询逻辑，后续维护更灵活。

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