能否根据用户套餐动态控制JavaScript函数执行对应逻辑

完全不需要维护两份JS代码，也不用在两个页面写重复业务逻辑，基于全局标识+公共权限校验的方式就可以实现，改动量极小。

核心实现思路 #

你现有保留index.html（PRO版）、index1.html（FREE版）的结构完全可以复用，只需要让两个页面在加载公共业务JS前提前注入全局套餐标识，所有业务逻辑统一读取这个标识做分支判断即可，所有功能代码只需要写一份。

具体实现步骤 #

1. 两个页面分别注入全局套餐标识 #

在两个HTML文件引用公共JS文件的标签之前，各加1行script标签声明全局套餐变量，除此之外两个页面的DOM、资源引用等内容可以完全保持一致，不需要改其他内容：

• PRO版index.html注入内容：

<script>
  // 标记当前加载的是PRO版本
  window.APP_USER_PLAN = 'pro';
</script>

• FREE版index1.html注入内容：

<script>
  // 标记当前加载的是FREE免费版本
  window.APP_USER_PLAN = 'free';
</script>

如果你后续想精简结构，甚至可以删掉其中一个HTML文件，在入口校验完用户身份后直接给全局变量赋值即可，连页面跳转步骤都能省掉，单入口就可以支持双套餐逻辑。

2. 改造公共JS的入口校验逻辑 #

把你原来的用户身份判断、页面跳转逻辑放到公共JS里，加个判断避免重复跳转：

// 原有用户信息获取逻辑保留
const payActive = JSON.parse(localStorage.getItem("payActive"));
const isValidProUser = userActive.isPro && payActive && parseInt(payActive.status) === 1;

// 未注入套餐标识时才走页面跳转，避免死循环
if (window.APP_USER_PLAN === undefined) {
  window.location.href = isValidProUser ? '../app/index.html' : '../app/index1.html';
}

3. 统一收口权限判断逻辑，改造功能分支 #

不要在每个业务函数里单独读localStorage做判断，抽一个全局公共的权限校验方法，所有需要区分套餐的功能直接调用这个方法即可，避免重复写判断逻辑：

/**
 * 公共权限校验方法 全项目所有需要区分套餐的位置直接调用
 * @returns {boolean} 是否为有效PRO专业版用户
 */
function isPro() {
  return window.APP_USER_PLAN === 'pro';
}

// 改造后的功能函数 公共JS里仅需维护这一份
function openAddPopup() {
  if (isPro()) {
    // PRO用户执行完整功能逻辑
    app.router.load('contactEdit', { 'isFavorite': state.isFavorite });
    return;
  }
  // 免费用户执行限制逻辑
  alert("免费版最多仅可添加3个元素");
}

方案优势 #

• 零重复代码：所有业务逻辑只需要在公共JS里维护一份，后续改功能、修bug只需要改一次，维护成本和单版本应用一致
• 权限逻辑统一收口：后续如果要调整套餐规则、新增其他套餐档位（比如团队版），只需要修改全局标识注入逻辑和isPro校验方法即可，不需要满项目找零散的判断条件
• 兼容性强：完全适配你现有的MVC架构和已写的跳转逻辑，不需要大规模重构现有代码
• 稳定性更高：全局标识在页面加载初期就确定，不会出现localStorage被篡改、读取时机不对导致的权限错配问题

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