将特定请求重定向到Blazor-wasm中的特定组件

Question

我使用Blazor wasm。我想检查Blazor应用程序的所有请求，如果请求Url以@likelocalhost:5000/@michel开头，则将其重定向到特定组件，例如可以捕获所有请求的asp核心中间件。我该怎么做？

Answer 1

我假设在正常情况下不存在@michel的路由，您会得到一个对不起，这个地址什么都没有消息。

在这种情况下，您应该能够修改Router的NotFound内容。

这是App的修改版本。UserRouteFound是一个神奇的新组件：它检测用户名请求并加载UserPage。

<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<UserRouteFound Layout="@typeof(MainLayout)" UserForm="@typeof(UserPage)">
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</UserRouteFound>
</NotFound>
</Router>

UserNotFound.cs

它实现了IComponent。

关键位为：

1. TryGetUserName检查是否存在@并获取用户名。这太简单了，你可能想更具体一点，并使用RegEx。

2. 我们尝试在SetParametersAsync中获取用户名并填充_username。

3. 如果我们有用户名，Render加载UserForm中定义的组件，而不是Not Found内容。

IComponent的实现是相当标准的MS DotNetCore。

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
namespace xxxxx;
public class UserRouteFound : IComponent
{
private RenderHandle _renderHandle;
private readonly RenderFragment _renderDelegate;
private string? _username;
[Inject] private NavigationManager NavigationManager { get; set; } = default!;
[Parameter, EditorRequired] public Type Layout { get; set; } = default!;
[Parameter, EditorRequired] public Type UserForm { get; set; } = default!;
[Parameter] public RenderFragment? ChildContent { get; set; }
public UserRouteFound()
=> _renderDelegate = Render;
public void Attach(RenderHandle renderHandle)
=> _renderHandle = renderHandle;
public Task SetParametersAsync(ParameterView parameters)
{
parameters.SetParameterProperties(this);
if (UserForm == null)
throw new InvalidOperationException($"The {nameof(RouteView)} component requires an IComponent UserForm class.");
_username = null;
if (TryGetUserName(out string? username))
_username = username;
_renderHandle.Render(_renderDelegate);
return Task.CompletedTask;
}
protected bool TryGetUserName(out string? value)
{
string? username = null;
var url = NavigationManager.Uri;
if (url.Contains("@"))
username = url.Substring(url.IndexOf("@"));
value = username;
return value is not null;
}
protected virtual void Render(RenderTreeBuilder builder)
=> _ = _username is not null 
? RenderUserFound(builder) 
: RenderNotFound(builder);
private bool RenderUserFound(RenderTreeBuilder builder)
{
builder.OpenComponent<LayoutView>(0);
builder.AddAttribute(1, nameof(LayoutView.Layout), Layout);
builder.AddAttribute(2, nameof(LayoutView.ChildContent), this.RenderUserForm);
builder.CloseComponent();
return true;
}
private bool RenderNotFound(RenderTreeBuilder builder)
{
builder.AddContent(0, this.ChildContent);
return true;
}
private RenderFragment RenderUserForm => (RenderTreeBuilder builder) =>
{
builder.OpenComponent(0, this.UserForm);
builder.AddAttribute(1, "UserName", _username);
builder.CloseComponent();
};
}

用户页面

这里有一个非常简单的"；UserForm"；。

<h3>UserPage</h3>
<div class="bg-dark text-white p-2 m-2">
@this.UserName
</div>
@code {
[Parameter] public string UserName { get; set; } = string.Empty;
}