Blazor WebAssembly本地开发：禁用AzureAD认证的UI优雅方案咨询

针对你本地开发时需要简化授权相关UI的需求，这里有几个更简洁的实现方案，不用在每个页面重复写环境判断：

方案1：封装自定义条件授权组件 #

把环境判断和原生AuthorizeView的逻辑封装成一个自定义组件，页面里直接复用即可，避免重复代码。

在Shared目录下创建ConditionalAuthorizeView.razor：

@inject IWebAssemblyHostEnvironment Env
@if (!Env.IsDevelopment())
{
    <AuthorizeView>
        <Authorized>@Authorized</Authorized>
        <NotAuthorized>@NotAuthorized</NotAuthorized>
    </AuthorizeView>
}
else
{
    <!-- 本地开发时直接渲染授权后内容，跳过登录流程 -->
    @Authorized
}

[Parameter]
public RenderFragment? Authorized { get; set; }

[Parameter]
public RenderFragment? NotAuthorized { get; set; }

然后页面里替换原来的AuthorizeView：

<ConditionalAuthorizeView>
    <Authorized>
        <!-- 原授权后内容 -->
        <p>已登录用户专属内容</p>
    </Authorized>
    <NotAuthorized>
        <!-- 原未授权内容 -->
        <p>请登录访问</p>
    </NotAuthorized>
</ConditionalAuthorizeView>

对于LoginDisplay组件，同样可以封装一个ConditionalLoginDisplay：

@inject IWebAssemblyHostEnvironment Env
@if (!Env.IsDevelopment())
{
    <LoginDisplay />
}

方案2：本地开发时模拟认证状态 #

通过自定义AuthenticationStateProvider，让Blazor在本地开发时默认认为用户已登录，这样原生的AuthorizeView、LoginDisplay会自动适配，完全不用修改UI代码。

1. 创建模拟认证状态提供者：

public class MockAuthStateProvider : AuthenticationStateProvider
{
    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        // 模拟一个已认证的测试用户
        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, "本地开发测试用户"),
            new Claim(ClaimTypes.Email, "dev-local@example.com")
        };
        var identity = new ClaimsIdentity(claims, "MockLocalAuth");
        var user = new ClaimsPrincipal(identity);
        
        return Task.FromResult(new AuthenticationState(user));
    }
}

2. 在Program.cs中根据环境注册服务：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// 其他服务注册...

if (builder.Environment.IsDevelopment())
{
    // 本地开发时替换默认认证状态提供者
    builder.Services.AddScoped<AuthenticationStateProvider, MockAuthStateProvider>();
}
else
{
    // 生产/非本地环境使用Azure AD认证
    builder.Services.AddMsalAuthentication(options =>
    {
        builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
        options.ProviderOptions.DefaultAccessTokenScopes.Add("api://your-api-scope");
    });
}

await builder.Build().RunAsync();

这个方案的优势是UI层零改动，所有授权组件会自动显示“已登录”状态，和生产环境体验一致但无需实际登录操作。

方案3：使用环境条件编译指令 #

如果你的本地开发仅对应Debug编译模式，可以直接用编译指令控制UI渲染：

#if !DEBUG
<AuthorizeView>
    <Authorized>已登录内容</Authorized>
    <NotAuthorized>请登录</NotAuthorized>
</AuthorizeView>
<LoginDisplay />
#else
<!-- 本地Debug模式下的简化内容 -->
<p>本地开发模式 - 无需登录</p>
#endif

不过这个方案灵活性稍差，如果你有多个非生产环境（比如Staging），适配性就不如前两个方案。

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