微前端Web应用中如何区分URL？按officeOption控制访问权限

核心逻辑 #

要实现不同officeOption对应不同Admin类URL的访问限制，关键要做到两点：

• 保证URL匹配的精确性，避免/admin规则误匹配到/admin/bla-bla-users
• 在路由跳转时校验当前officeOption与URL对应的权限是否一致，不一致则直接拦截

具体实现代码 #

假设你是在前端hash路由场景下开发（比如单页应用），可以参考以下代码实现：

// 实际项目中，officeOption可从localStorage、全局状态管理或配置文件中获取
const currentOfficeOption = 'U'; 

// 路由权限规则配置：优先放更具体的路径规则，或用正则保证精确匹配
const routePermissions = [
  {
    // 精确匹配用户端的admin子路径
    pathRegex: /^#\/admin\/bla-bla-users$/,
    requiredRole: 'U',
    isEnabled: true // 对应你的turnOnUsers开关变量
  },
  {
    // 仅匹配/admin根路径，不匹配任何子路径
    pathRegex: /^#\/admin$/,
    requiredRole: 'A',
    isEnabled: true // 对应你的turnOnAdmin开关变量
  }
];

// 权限校验核心函数
function validateRoutePermission() {
  const currentPath = window.location.hash;
  let permissionGranted = false;

  for (const perm of routePermissions) {
    // 先检查功能开关是否开启，未开启则跳过该规则
    if (!perm.isEnabled) continue;
    
    if (perm.pathRegex.test(currentPath)) {
      // 匹配到对应路径后，校验当前角色是否符合要求
      permissionGranted = perm.requiredRole === currentOfficeOption;
      break;
    }
  }

  if (!permissionGranted) {
    // 无权限时的处理：跳转到无权限提示页或首页
    window.location.hash = '#/access-denied';
    // 也可根据业务需求添加提示
    console.warn('无访问权限，请切换对应权限角色');
  }
}

// 监听路由变化，触发权限校验
window.addEventListener('hashchange', validateRoutePermission);
// 页面初始加载时也执行一次校验
window.addEventListener('DOMContentLoaded', validateRoutePermission);

关键细节说明 #

1. 正则精确匹配：

   • 给正则加上$结尾，确保/admin只会匹配根路径，不会误匹配到子路径
   • 如果URL可能带参数（比如#/admin?foo=bar），可把正则改成/^#\/admin(\?.*)?$/兼容参数场景

2. 规则顺序优化：

   • 把更具体的路径规则（比如/admin/bla-bla-users）放在前面，即使正则没加$，也会优先匹配到具体路径，避免被父路径规则提前拦截

3. 开关变量的灵活使用：

   • 规则中的isEnabled对应你给出的turnOnUsers/turnOnAdmin，可用于不同环境或业务场景下临时关闭某类权限的访问

4. 无权限处理扩展：

   • 除了跳转提示页，还可根据业务需求做其他处理，比如弹出模态框提示、返回上一页等

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