.net - Blazor WebAssembly。在布局级别添加授权属性
问题描述
我从一个 Visual Studio 模板开始,这是一个新的 Blazor WebAssembly,具有身份验证和 Web API 作为服务器端。
我的问题是保护所有页面,而不仅仅是一些页面。我试图添加:
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
到 MainLayout 而不是所有页面,但没有任何运气。我想这样做是因为我正在写一个管理员,如果没有连接,我根本不希望人们看到布局
解决方案
我想这样做是因为我正在写一个管理员,如果没有连接,我根本不希望人们看到布局
可以理解为,当用户没有登录的时候,是不能进入任何页面的,所以jump to the login page
这个时候可以,对吧?
如果是这样,您可以通过以下步骤实现:
首先在当前 blazor 项目中创建一个RedirectToLogin.razor页面。
在
OnInitializedAsync
这个页面的方法中,通过判断当前是否有用户登录,如果没有则重定向到该Login
页面。RedirectToLogin.razor:
@inject NavigationManager Navigation @code { [CascadingParameter] private Task<AuthenticationState> AuthenticationStateTask { get; set; } protected override async Task OnInitializedAsync() { var authenticationState = await AuthenticationStateTask; if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated) { Navigation.NavigateTo("Identity/Account/Login", true); } } }
然后在App.razor中添加如下代码,确保
NotAuthorized
会进入RedirectToLogin.razor
页面:<CascadingAuthenticationState> <Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"> <NotAuthorized> <RedirectToLogin /> </NotAuthorized> </AuthorizeRouteView> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> </CascadingAuthenticationState>
最后在MainLayout.razor页面中,区分了Authorized和NotAuthorized:</p>
@inherits LayoutComponentBase <AuthorizeView> <Authorized> <div class="sidebar"> <NavMenu /> </div> <div class="main"> <div class="top-row px-4 auth"> <LoginDisplay /> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <div class="content px-4"> @Body </div> </div> </Authorized> <NotAuthorized> <RedirectToLogin /> </NotAuthorized> </AuthorizeView>
这是测试结果:
推荐阅读
- javascript - 如何使用 React 钩子状态从一个组件到另一个组件
- git - 如何合并来自 GitHub 和 GitLab 的两个存储库?
- tcl - 在 tcl/tk 中添加不同颜色的标签文本
- python - 如何在 CNN 模型中找到单个精度以用于研究目的?
- python - 找不到步骤定义 -- pytest-bdd
- google-sheets - 现有自动刷新连接工作表的可见性
- python - 我如何解决这个循环导入?
- node.js - 简单的 https express 导致“此页面无法正常工作”
- reactjs - 安装“sharp”模块出了点问题
- javascript - 如何使用代理合并数组中的相同项目?