通知所有组件 Blazor 中的身份验证已更改
Notify all components that authentication has been changed in Blazor
我有一个包含很多 html
标记的 Blazor(版本 net5.0
)组件,这里是它的一部分:
<a class="@(IsAuthenticated?"":"hide")" href="#">My link for logged in users</a>
这是我的 C# 代码 (MyComponent.Razor):
[CascadingParameter] private Task<AuthenticationState> authenticationState { get; set; }
private AuthenticationState auth;
public bool IsAuthenticated { get; set; }
protected async override Task OnInitializedAsync()
{
auth = await authenticationState;
var user = auth.User.Identity.IsAuthenticated;
await base.OnInitializedAsync();
}
在我的登录组件中,成功登录后我调用StateHasChanged();
void Login()
{
...
StateHasChanged();
}
但是登录后,除非我刷新页面,否则不会应用对 MyComponent 的任何更改,以便组件重新呈现自己。
注意: 我不想使用 AuthorizeView
因为正如我提到的 MyComponent[= 中有很多标记和组件37=] 并且我不想为每个我想根据用户身份验证更改其行为的样式或元素设置 AuthorizeView
。
更新: 我的 App.razor
组件中有以下代码:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout)" >
<Authorizing>
<text> my Custom Authotizing in app.razor ...</text>
</Authorizing>
<NotAuthorized>
<text> my Custom NOT Authotized in app.razor ...</text>
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="@typeof(Layout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>
查看 AuthorizedView
源代码我终于明白我应该使用 OnParametersSetAsync
和 属性 :
<a class="@MyClassProp" href="#">My link for logged in users</a>
代码:
public string MyClassProp { get; set; } = "hide";
public async Task<string> GetClassAsync()=> (await authenticationState).User.Identity.IsAuthenticated ? "" : "hide";
protected async override Task OnParametersSetAsync()
{
MyClassProp = await GetClassAsync(); // also call GetClass in OnInitializedAsync
StateHasChanged();
await base.OnParametersSetAsync();
}
我在问题中创建的 IsAuthenticated
属性 始终等于其初始状态并且不会随着 AuthenticationState
的改变而改变,即使我在OnParametersSetAsync
。不必在登录和注销方法中调用 StateHasChanged()
。如果我不使用 MyClassProp
属性,而是从标记中调用 GetClassAsync
,它也不起作用。
警告: 通过为未经授权的用户设置 css
class 来隐藏元素的整个方法存在安全问题,因为内容仍然可以用户甚至仅使用他们的浏览器就可以公开或修改。
我有一个包含很多 html
标记的 Blazor(版本 net5.0
)组件,这里是它的一部分:
<a class="@(IsAuthenticated?"":"hide")" href="#">My link for logged in users</a>
这是我的 C# 代码 (MyComponent.Razor):
[CascadingParameter] private Task<AuthenticationState> authenticationState { get; set; }
private AuthenticationState auth;
public bool IsAuthenticated { get; set; }
protected async override Task OnInitializedAsync()
{
auth = await authenticationState;
var user = auth.User.Identity.IsAuthenticated;
await base.OnInitializedAsync();
}
在我的登录组件中,成功登录后我调用StateHasChanged();
void Login()
{
...
StateHasChanged();
}
但是登录后,除非我刷新页面,否则不会应用对 MyComponent 的任何更改,以便组件重新呈现自己。
注意: 我不想使用 AuthorizeView
因为正如我提到的 MyComponent[= 中有很多标记和组件37=] 并且我不想为每个我想根据用户身份验证更改其行为的样式或元素设置 AuthorizeView
。
更新: 我的 App.razor
组件中有以下代码:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout)" >
<Authorizing>
<text> my Custom Authotizing in app.razor ...</text>
</Authorizing>
<NotAuthorized>
<text> my Custom NOT Authotized in app.razor ...</text>
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="@typeof(Layout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>
查看 AuthorizedView
源代码我终于明白我应该使用 OnParametersSetAsync
和 属性 :
<a class="@MyClassProp" href="#">My link for logged in users</a>
代码:
public string MyClassProp { get; set; } = "hide";
public async Task<string> GetClassAsync()=> (await authenticationState).User.Identity.IsAuthenticated ? "" : "hide";
protected async override Task OnParametersSetAsync()
{
MyClassProp = await GetClassAsync(); // also call GetClass in OnInitializedAsync
StateHasChanged();
await base.OnParametersSetAsync();
}
我在问题中创建的 IsAuthenticated
属性 始终等于其初始状态并且不会随着 AuthenticationState
的改变而改变,即使我在OnParametersSetAsync
。不必在登录和注销方法中调用 StateHasChanged()
。如果我不使用 MyClassProp
属性,而是从标记中调用 GetClassAsync
,它也不起作用。
警告: 通过为未经授权的用户设置 css
class 来隐藏元素的整个方法存在安全问题,因为内容仍然可以用户甚至仅使用他们的浏览器就可以公开或修改。