如何通过MVC Web API验证Windows AD组实现Angular 4路由权限控制

针对你用Angular 4开发内网应用、限制仅IntranetAdmin Windows AD组用户访问的需求，我整理了一套完整的实现方案，从前端路由拦截到后端权限校验都覆盖到了，确保非授权用户既不能通过导航进入受保护路由，也无法手动输入地址绕过限制：

1. 实现路由守卫（核心拦截逻辑） #

Angular的CanActivate路由守卫是实现路由级权限控制的关键，它会在用户访问任何路由前触发校验。我们先创建一个AuthGuard服务，用来调用你的后端API校验用户权限：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private http: HttpClient, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 调用后端权限校验接口
    return this.http.get('/api/check-ad-group')
      .pipe(
        map((response: { isAuthorized: boolean }) => {
          if (response.isAuthorized) {
            // 权限通过，允许访问路由
            return true;
          } else {
            // 无权限，重定向到专属页面
            this.router.navigate(['/unauthorized']);
            return false;
          }
        }),
        catchError(() => {
          // 接口调用失败（比如网络问题），同样视为无权限
          this.router.navigate(['/unauthorized']);
          return of(false);
        })
      );
  }
}

2. 配置受保护路由 #

在你的路由配置文件（app-routing.module.ts）中，给所有需要保护的路由添加canActivate: [AuthGuard]，同时配置无权限页面和通配符路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 给需要保护的路由添加守卫
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  // 无权限页面不需要守卫
  { path: 'unauthorized', component: UnauthorizedComponent },
  // 未知路由直接重定向到无权限页面
  { path: '**', redirectTo: '/unauthorized' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard] // 注册守卫服务
})
export class AppRoutingModule { }

这样不管用户是通过应用内导航，还是手动在浏览器输入地址，都会先经过AuthGuard的校验，非授权用户会被直接拦截到无权限页面。

3. 完善后端API校验逻辑 #

你已经有了获取登录用户名的代码，现在需要补充AD组校验的逻辑，确保接口能返回用户是否在IntranetAdmin组中：

using Microsoft.AspNetCore.Mvc;
using System.Security.Principal;

[ApiController]
[Route("api")]
public class AuthController : ControllerBase
{
    private readonly IConfiguration _configuration;

    public AuthController(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    [HttpGet("check-ad-group")]
    public IActionResult CheckAdGroupMembership()
    {
        IPrincipal user = HttpContext.User;
        string loginName = user.Identity.Name;
        
        // 从web.config读取配置的AD组名
        string allowedAdGroup = _configuration["AllowedAdGroup"];
        
        // 校验用户是否属于目标AD组
        bool isAuthorized = user.IsInRole(allowedAdGroup);
        
        return Ok(new { isAuthorized = isAuthorized });
    }
}

同时在你的web.config中添加AD组配置：

<appSettings>
  <add key="AllowedAdGroup" value="IntranetAdmin" />
</appSettings>

注意：确保你的应用已经启用了Windows身份验证，否则HttpContext.User无法正确获取AD用户信息。

4. 额外安全优化 #

• 缓存权限结果：可以把后端返回的权限状态存在Angular服务或localStorage中，避免每次路由跳转都调用API，提升体验。但要注意，如果用户的AD组权限变更，需要刷新页面才能生效。
• 懒加载模块保护：如果你的应用使用了懒加载模块，可以用CanLoad守卫代替CanActivate，防止未授权用户下载模块代码。
• 静态资源保护：如果有需要保护的静态文件，要在后端配置对应的权限拦截，避免用户直接访问。

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