一个 .net 8 + Azure 登录 + Ant Design Blazor 的基本后台框架
主界面使用了 Ant Design Blazor 项目模板搭建
后台技术是 .net 8 Blazor run at server 模式
登录方式使用 Azure
实现了菜单导航和路由
此外实现了读取和修改本地Json文件的功能,不是必须的,不需要的可以拿掉,我是自己项目需要
点击下载
由于没有对权限进行细分,所以没有做菜单的权限控制,基本上有 Azure 账户就能登录进来,如果要细分,也很简单,就是在 Azure 的 Claims 里做文章,这里也不说了
Azure 登录的关键代码在 BasicLayout.razor,这点跟传统的登录以后再跳转有些不一样
@namespace Bestrane.OPS.Web
@inherits LayoutComponentBase
@inject NavigationManager _navigationManager
<CascadingAuthenticationState><Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><AuthorizeView><Authorized><AntDesign.ProLayout.BasicLayout Logo="@("https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg")"MenuData="_menuData"><RightContentRender><Bestrane.OPS.Web.Components.RightContent /></RightContentRender><ChildContent>@Body</ChildContent><FooterRender><FooterView Copyright="2024 BOPS" Links="Links"></FooterView></FooterRender></AntDesign.ProLayout.BasicLayout><SettingDrawer /></Authorized><NotAuthorized><div class="main__b__0"><div class="login"><Card Title="BOPS" Style="width:300px;"><Body><Button Type="@ButtonType.Primary" OnClick="HandleSubmit">Azure Login</Button></Body></Card></div></div>@* <li><a href="MicrosoftIdentity/Account/SignIn">Log in</a></li> *@</NotAuthorized></AuthorizeView></Found></Router><AntContainer />
</CascadingAuthenticationState>@code
{public void HandleSubmit(){_navigationManager.NavigateTo("MicrosoftIdentity/Account/SignIn", true);}private MenuDataItem[] _menuData = { };[Inject] public HttpClient? _httpClient { get; set; }protected override async Task OnInitializedAsync(){await base.OnInitializedAsync();_menuData = await _httpClient.GetFromJsonAsync<MenuDataItem[]>("data/menu.json");}public LinkItem[] Links { get; set; } = new LinkItem[] { };
}