Blazor Web Assembly - 体验一下Authentication State从Server共享给Client

1.简单介绍

.NET 9 中Blazor Web Assembly新增加了一个特性就是Server端的认证状态可以持久化并共享给Client端。这边尝试一下在Static SSR Blazor页面中进行登录(SSR是Server side Rendering的缩写)，然后应用.NET 9中的新特性，对AuthenticationState进行持久化并共享到Client端Blazor页面(渲染模式为InteractiveWebAssembly)。

2.具体说明

2.1 添加Login页面

由于Blazor Login页面采用的是Static SSR渲染模式，因此使用的是Asp.Net Core表单进行登录

表单提交后，使用HttpContext.SignInAsync方法把Authentication状态保存到cookie中

2.2 注册Middleware

在Program中，添加Authentication相关的中间件

2.3 添加Blazor页面

添加一个渲染模式为InteractiveServer的Blazor页面

同时添加一个渲染模式为InteractiveWebAssembly的页面

再添加一个Static SSR的Blazor页面

2.4 运行一下

首先进入了登录界面，如下图

输入用户名和密码，跳转到Home页面

点击渲染模式为InteractiveWebAssembly的页面(左侧菜单 WasmAuthCheck)

可以看出页面中有报错，同时用户的名字和IsAuthenticated状态信息没有显示出来

浏览器控制台的错误也是因为在Client端OnInitializedAsync方法无法获取AuthenticationState而产生的。

点击渲染模式为InteractiveServer的页面(左侧菜单 ServerPageCheck)

发现用户的认证信息显示正常

点击渲染模式为Static SSR的页面(左侧菜单 StaticSSRPageCheck)

发现用户的认证信息显示正常

2.5 添加 .NET 9 新特性

在Server端，添加如下代码

复制代码

.AddAuthenticationStateSerialization(options => options.SerializeAllClaims = true);

在Client端，添加如下代码

复制代码

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddAuthenticationStateDeserialization();

2.6 再次运行一下

输入用户名和密码登录系统，发现渲染模式为InteractiveWebAssembly的页面中，用户的认证信息也显示正常了

3.总结

本文简单体验了一下Authentication State从Server端持久化并共享到客户端的特性。通过这个特性，Client端的页面可以复用Server端的身份认证信息了，下面是序列化Authentication State的方法，

AddAuthenticationStateSerialization

AddAuthenticationStateDeserialization

本文如果哪里有错误，麻烦告之，谢谢谢谢！