Blazor路由守卫实现（手把手教你用C#保护Blazor页面路由）

什么是Blazor路由守卫？

简单来说，Blazor页面保护就是当用户尝试访问某个页面时，系统先检查其是否已登录或具备相应权限。如果没有，则自动跳转到登录页或其他提示页面。这类似于现实中的“门禁系统”——只有持有通行证的人才能进入。

准备工作

确保你已经安装了：

• .NET 6 或更高版本
• Visual Studio 2022 或 VS Code
• 一个新建的 Blazor WebAssembly 或 Blazor Server 项目

步骤一：创建认证状态服务

首先，我们需要一个服务来管理用户的登录状态。在 Services 文件夹下（若无则新建）创建 AuthenticationStateService.cs：

public class AuthenticationStateService{    private bool _isAuthenticated = false;    public bool IsAuthenticated => _isAuthenticated;    public void SetAuthenticated(bool isAuthenticated)    {        _isAuthenticated = isAuthenticated;    }}

步骤二：注册服务

在 Program.cs 中注册该服务（以 Blazor WebAssembly 为例）：

// Program.csusing Microsoft.AspNetCore.Components.Web;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;using YourAppName.Services;var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });// 注册认证状态服务builder.Services.AddSingleton<AuthenticationStateService>();await builder.Build().RunAsync();

步骤三：创建路由守卫组件

新建一个 Razor 组件 RouteGuard.razor，用于包裹需要保护的页面内容：

@inject NavigationManager Navigation@inject AuthenticationStateService AuthService@if (AuthService.IsAuthenticated){    @ChildContent}else{    <div style="padding: 20px; text-align: center; color: #e74c3c;">        <h3>您尚未登录！</h3>        <p>正在跳转至登录页面...</p>    </div>    @if (!_redirecting)    {        _redirecting = true;        Navigation.NavigateTo("/login");    }}@code {    [Parameter] public RenderFragment ChildContent { get; set; } = default!;    private bool _redirecting = false;}

步骤四：在受保护页面中使用路由守卫

例如，在 Dashboard.razor 页面中：

@page "/dashboard"@inject AuthenticationStateService AuthService<RouteGuard>    <div style="padding: 20px;">        <h2>欢迎来到仪表盘！</h2>        <p>只有登录用户才能看到此内容。</p>    </div></RouteGuard>

步骤五：模拟登录逻辑

在 Login.razor 页面中添加登录按钮：

@page "/login"@inject AuthenticationStateService AuthService@inject NavigationManager Navigation<button @onclick="Login" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">    模拟登录</button>@code {    private void Login()    {        AuthService.SetAuthenticated(true);        Navigation.NavigateTo("/dashboard");    }}

进阶建议

- 在真实项目中，应结合 ASP.NET Core Identity 或 JWT 实现真正的身份验证。
- 可扩展 AuthenticationStateService 以支持角色权限（如 Admin、User）。
- 使用 OnAfterRenderAsync 避免 SSR（服务器端渲染）下的导航问题。

总结

通过以上步骤，你已经成功实现了基础的 Blazor路由守卫 功能！这不仅能提升应用安全性，还能改善用户体验。记住，Blazor身份验证 和 C# Blazor安全路由 是构建专业级应用的必备技能。快去试试吧！