Blazor wasm-在哪里检查用户权限

Question

使用带有asp.net服务器的Blazor Web Assembly Web应用程序，我想过滤用户可以看到/更改/使用的表单/输入。即，没有权限的匿名或登录用户不能查看或修改选择表单(组合框(。该页面显示有关特定区域的信息(同一页面用于不同的区域，但使用url中的输入来指定区域(。如果用户没有权限，则只允许使用基本视图。如果用户来自该区域(区域索赔值(；升高的"；角色显示了一个更高级的视图。如果我只想检查用户角色是例如"；管理员"：

<AuthorizeView Roles="Admin">
<Authorized>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Secret choise:</span>
</div>
<select @bind="Choise">
<option value=A>A</option>
<option value=B>B</option>
</select>
</div>
</Authorized>
</AuthorizeView>

但是Role和"；区域"；与变量值相比，声明似乎需要更多的代码。。。使用razor.cs代码调用服务器：

private async Task CheckUserViewPriveligesViaServer()
{
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var user = authState.User;
if (user.Identity.IsAuthenticated)
{
var claims = user.Claims;
var userID = user.FindFirst(c => c.Type == "sub")?.Value;
UserSiteDTO userSiteDTO = new UserArea() { AreaID = _area.ID, UserID = userID };
try
{
var canUserViewSensitiveInformation = await UsersReposotory.IsUserElevatedAndFromArea(userSiteDTO); // calls asp.net server
if (canUserViewSensitiveInformation)
{
_viewPriveliges = ViewPriveliges.AreaAdmin;
}
else
{
_viewPriveliges = ViewPriveliges.None;
}
}
catch (Exception)
{
_viewPriveliges = ViewPriveliges.None;
Console.WriteLine("Unable to get user priveliges");
}
}
else
{
_viewPriveliges = ViewPriveliges.None;
}
}

在服务器上：

[HttpPost("isUserElevatedAndFromArea")]
public async Task<ActionResult<bool>> IsUserElevatedAndFromArea(UserSiteDTO userDTO)
{
if (string.IsNullOrWhiteSpace(userDTO.AreaID) 
|| string.IsNullOrWhiteSpace(userDTO.UserID))
{
return false;
}
var user = await _userManager.FindByIdAsync(userDTO.UserID);
var claims = await _userManager.GetClaimsAsync(user);
var areaOk = false;
var adminOk = false;
foreach (var c in claims)
{
if (c.Type == "AreaID")
{
if (!string.IsNullOrWhiteSpace(c.Value) && c.Value == userDTO.AreaID )
{
areaOk = true;
}
}
if (c.Type == "AreaAdmin")
{
if (!string.IsNullOrWhiteSpace(c.Value) || c.Value == "Yes")
{
adminOk = true;
}
}
}
return areaOk && adminOk;
}

再加上剃刀代码中的if语句：

@if (_viewPriveliges == ViewPriveliges.AreaAdmin)
{
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Secret choise:</span>
</div>
<select @bind="Choise">
<option value=A>A</option>
<option value=B>B</option>
</select>
</div>
}

另一种选择是"；烘烤"；将服务器代码转换为razor.cs代码，以在webassembly中运行检查。

所以，我的问题是，如果它是"；ok"；从安全角度来看，在页面的代码(浏览器中的webassembly(中检查这些信息，或者是否应该通过http get/post调用来调用服务器？？

Answer 1

不，它在浏览器中是不安全的。浏览器应该只查看客户端拥有的权限。此外，客户端的硬件实际上是未知的，因此对数据进行排序和过滤的性能也值得怀疑。

Answer 2

尝试使用这个内置组件-授权视图：

<AuthorizeView>
<Authorized>
<h1>Hello, @context.User.Identity.Name!</h1>
<p>You can only see this content if you're authenticated.</p>
</Authorized>
<NotAuthorized>
<h1>Authentication Failure!</h1>
<p>You're not signed in.</p>
</NotAuthorized>
</AuthorizeView>

但正如@Brian Parker所指出的，这只是一种方便。由于你在客户端上，实际上没有安全性这回事，因为所有的安全措施都可以绕过。换句话说，您需要确保您的安全措施在API中到位，这样就不会将不安全的数据传递给客户端。