Angular UI Router 1.x 路由认证、授权及角色校验问题求助

我来帮你完善基于角色和权限的认证授权逻辑，咱们一步步来实现：

1. 先扩展你的AuthService，添加角色与权限校验方法 #

你的现有AuthService只有认证状态检查，现在需要补充获取用户角色、校验角色匹配、校验权限的方法，假设登录后authData里存储了用户的角色列表和权限列表：

// 扩展后的AuthService方法
this.isAuthenticated = function () {
  return !!authData;
};

// 获取当前用户的角色数组
this.getUserRoles = function () {
  return authData ? (authData.roles || []) : [];
};

// 检查用户是否拥有指定角色中的任意一个（支持多角色可选）
this.hasAnyRequiredRole = function (requiredRoles) {
  // 如果路由没指定角色，默认通过校验
  if (!requiredRoles || requiredRoles.length === 0) return true;
  
  const userRoles = this.getUserRoles();
  // 只要用户拥有其中一个角色就通过
  return requiredRoles.some(role => userRoles.includes(role));
};

// 检查用户是否拥有指定权限
this.hasRequiredPermission = function (requiredPermission) {
  // 如果路由没指定权限，默认通过校验
  if (!requiredPermission) return true;
  
  return authData ? authData.permissions.includes(requiredPermission) : false;
};

2. 修改$transitions钩子，加入角色与权限校验逻辑 #

在原来的认证检查基础上，增加角色和权限的校验步骤，校验不通过时跳转到auth.denied状态：

run(function ($transitions, $state, AuthService) {
  // 拦截需要认证的路由
  $transitions.onStart({ 
    to: function (state) { 
      return !!(state.data && state.data.requiredAuth); 
    } 
  }, function ($transition$) {
    const targetState = $transition$.to();
    
    // 第一步：检查用户是否已认证
    if (!AuthService.isAuthenticated()) {
      return $state.target('auth.login');
    }
    
    // 第二步：从目标路由的data中获取需要的角色和权限
    const requiredRoles = targetState.data.role;
    const requiredPermission = targetState.data.permission;
    
    // 校验角色：不满足则跳转到权限拒绝页
    if (!AuthService.hasAnyRequiredRole(requiredRoles)) {
      return $state.target('auth.denied');
    }
    
    // 校验权限：不满足则跳转到权限拒绝页
    if (!AuthService.hasRequiredPermission(requiredPermission)) {
      return $state.target('auth.denied');
    }
  });

  // 已认证用户访问auth路由时自动跳转到app首页
  $transitions.onStart({ to: 'auth.*' }, function () {
    if (AuthService.isAuthenticated()) {
      return $state.target('app');
    }
  });
});

3. 路由配置的注意事项 #

你的现有路由配置已经正确设置了role和permission的data属性，这里补充几个小提示：

• 如果某个路由只需要登录认证，不需要角色/权限限制，只保留requiredAuth: true即可，不用设置role或permission
• 角色列表支持多个值（数组格式），表示用户拥有其中任意一个角色即可访问
• 权限字段是单个字符串，对应用户权限列表中的某一项

关键说明 #

• 确保用户登录后，后端返回的用户信息中包含roles（数组类型）和permissions（数组类型），并正确存储到AuthService的authData中
• 你已经配置了auth.denied状态，权限校验不通过时会自动跳转到该页面，符合需求
• 如果需要调整校验逻辑（比如要求用户拥有所有指定角色），可以把some改成every即可

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