本文将介绍在 Blazor 静态服务端呈现（静态 SSR）模式下，用户登录身份认证的实现方式。

SSR 简介

SSR（Server-Side Rendering）指的是服务器侧呈现。HTML 是由服务器上的 ASP.NET Core 运行时生成，通过网络发送到客户端，供客户端的浏览器显示。SSR 分为两种类型：

• 静态 SSR：服务器生成静态 HTML，不提供用户交互性或维护 Razor 组件状态，通过 HTTP 协议进行通信。
• 交互式 SSR：Blazor 事件允许用户交互，并且 Razor 组件状态由 Blazor 框架维护，通过 SignalR 连接使用 WebSocket 协议进行通信。

为什么使用静态 SSR

由于交互式 SSR 存在断线重连的问题，影响用户体验。因此，采用静态 SSR 组件呈现服务端内容，增加前端交互体验，采用 JavaScript 作为前端交互的解决方案。

实现思路

• 在 App.razor 文件中使用级联参数的 HttpContext 对象获取用户是否登录。
• 将用户登录信息传递给路由组件的级联 Context 对象。
• 在所有子组件中，使用级联参数的 Context 对象获取用户信息。
• 使用 HttpContext.SignInAsync 和 HttpContext.SignOutAsync 实现登录和注销。

实现步骤

• 创建 UserInfo 和 Context 类

public class UserInfo
{
    public string UserName { get; set; }
}

public class Context
{
    public UserInfo CurrentUser { get; set; }
}

• 创建 App.razor 文件

    


    



@code {
    [CascadingParameter] private HttpContext HttpContext { get; set; }
    private UserInfo user;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        if (HttpContext.User.Identity.IsAuthenticated)
            user = new UserInfo { UserName = HttpContext.User.Identity.Name };
        else
            user = null;
    }
}

• 创建 Route.razor 文件

    
        
            
        
        
    


@code {
    private UIContext context;

    [Parameter] public UserInfo User { get; set; }

    protected override void OnInitialized()
    {
        context = new Context();
        context.CurrentUser = User;
        base.OnInitialized();
    }
}

• 创建 LoginBox.razor 文件

@if (Context.CurrentUser == null)
{
    登录
    
}
else
{
    退出
    
}

@code {
    [CascadingParameter] private Context Context { get; set; }
}

• 创建 AuthController.cs 文件

public class AuthController : ControllerBase
{
    private const string AuthType = "App_Cookie";

    [Route("signin")]
    public async Task Login([FromBody] UserInfo info)
    {
        var claims = new List() { new(ClaimTypes.Name, info.UserName) };
        var identity = new ClaimsIdentity(claims, AuthType);
        var principal = new ClaimsPrincipal(identity);
        await HttpContext.SignInAsync(AuthType, principal);
    }

    [Route("signout")]
    public async Task Logout()
    {
        await HttpContext.SignOutAsync(AuthType);
    }
}