如何将Identity的Account Manage改造为Razor Component实现UI一致性

AI 小北

2026-10-2

实现方案

这个需求完全可以实现，以下是两种适配不同场景的落地方案：

方案1：共享布局组件，双端渲染

适合不想改动原有Identity脚手架逻辑的项目，只需维护一套菜单代码：

先把Blazor端的顶部、左侧菜单封装为独立的通用Razor组件，比如命名为Shared/SiteMenu.razor，所有菜单逻辑、样式、交互都只在该组件内维护。
找到Identity管理页面的cshtml布局文件，默认路径为Areas/Identity/Pages/Account/Manage/_Layout.cshtml，注入IComponentRenderer服务后，在菜单对应位置调用组件渲染方法即可：
```
@inject IComponentRenderer ComponentRenderer
@* 其他布局代码 *@
<div class="menu-container">
    @(await ComponentRenderer.RenderComponentAsync<Shared.SiteMenu>(RenderMode.Static))
</div>
```
如果菜单有交互逻辑，可以根据你的Blazor渲染模式替换RenderMode.Static为RenderMode.Server/RenderMode.WebAssembly。

路径统一可以通过路由重写实现，在Program.cs中添加如下规则即可让访问/profile的形式和/counter完全一致，底层加载Identity管理页面：

app.UseRewriter(new RewriteOptions()
    .AddRedirect("profile", "/Identity/Account/Manage")
    .AddRewrite("profile", "/Identity/Account/Manage", skipRemainingRules: true));

方案2：迁移Identity管理逻辑到Blazor页面

适合无历史包袱的新项目，完全淘汰cshtml格式的Identity页面：

在Razor Component中直接注入UserManager<IdentityUser>、SignInManager<IdentityUser>等Identity原生服务。
自行实现密码修改、个人信息编辑等功能，调用Identity服务的对应方法即可，逻辑和原脚手架页面完全一致。
直接给Blazor个人资料页面配置路由，比如@page "/profile"，天然和/counter等页面使用同一套布局，无需额外适配。