我需要在blazor服务器应用程序的登录页面的一个简单的例子，没有看到或访问(在url字符串)任何其他元素

我会缩短我的问题。xD

所以，我使用VS2022, c#。

使用现有的VS 2022模板创建带有个人帐户的blazorserverapp - OK。
数据库迁移到我的postgres数据库使用EF - done。
登录创建的网站- OK
登录/注销工作正常- OK。

问题:

我如何避免看到创建的blazorserver应用程序网页上的所有元素，而我没有登录?
我如何避免在未登录时通过输入url(例如:https://localhost:7164/counter)访问网页元素?

必须在代码中更改以获得显示/访问(而未登录)禁止?

一个简单的空白(白色)页面，没有任何元素，除了一个带有用户/密码字段的小窗口和一个按钮在里面和在那个空的登录页面的中间，会很好。

但是像这样的东西，这实际上很简单，在任何地方都找不到-我在谷歌上找了几个星期…

每个人都在展示/呈现一个blazorserver登录(个人帐户，身份验证到SQL Server或-对我来说理想的- PostgreSQL)的例子，但是:你可以看到/访问所有元素，而你没有登录。

谁能举个例子吗?

谢谢最好的

注::对不起，我的英语不好(我来自奥地利)

这是我的mainlayout。razor:

@inherits LayoutComponentBase
<PageTitle>msgsolutions</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4 auth">
<LoginDisplay />
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>

这里是index。razor:

@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

This is Shared/LoginDisplay.razor:

<AuthorizeView>
<Authorized>
<a href="Identity/Account/Manage">Hello, @context.User.Identity?.Name!</a>
<form method="post" action="Identity/Account/LogOut">
<button type="submit" class="nav-link btn btn-link">Log out</button>
</form>
</Authorized>
<NotAuthorized>
<a href="Identity/Account/Register">Register</a>
<a href="Identity/Account/Login">Log in</a>
</NotAuthorized>

还有这里的Areas/Identity/Pages/shared/_LoginPartial.cshtml:

@using Microsoft.AspNetCore.Identity
@inject SignInManager<IdentityUser> SignInManager
@inject UserManager<IdentityUser> UserManager
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a  class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity?.Name!</a>
</li>
<li class="nav-item">
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="/" method="post">
<button  type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>

最好在登录页面的中间显示这个。这个登录页面必须首先出现，并且在用户登录之前，没有其他元素必须显示在这个第一页上(例如):

<style>

#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 400px;
height: 280px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
margin-left: auto;
margin-right: auto;
}
input[type=submit] {
background: #00BBFF;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
</style>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<EditForm Model=@login>
<div class="form-group">
<label for="Username" class="text-info">Username:</label><br>
<InputText @bind-Value=@login.user type="text" name="username" id="username" class="form-control" />
</div>
<div class="form-group">
<label for="Password" class="text-info">Password:</label><br>
<InputText @bind-Value=@login.password type="password" name="password" id="password" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-outline-primary" value="Authenticate" @onclick="@(()=>IsLoginValid())"></input>
</div>
</EditForm>
</form>
</div>
</div>
</div>
</div>
</div>

编辑(解决):我们可以用这种方式来管理:使用索引。Razor(其中包含:"/")，并将内容替换为:

@page "/"
@inject NavigationManager NavigationManager
@inject IJSRuntime jsRuntime
@inject IHttpContextAccessor httpContext
@using System.Net;
<PageTitle>OurLogin</PageTitle>
<style>

#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 400px;
height: 280px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
margin-left: auto;
margin-right: auto;
}
input[type=submit] {
background: #00BBFF;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
</style>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<EditForm Model=@login>
<div class="form-group">
<label for="Username" class="text-info">Username:</label><br>
<InputText @bind-Value=@login.user type="text" name="username" id="username" class="form-control" />
</div>
<div class="form-group">
<label for="Password" class="text-info">Password:</label><br>
<InputText @bind-Value=@login.password type="password" name="password" id="password" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-outline-primary" value="Authenticate" @onclick="@(()=>IsLoginValid())"></input>
</div>
</EditForm>
</form>
</div>
</div>
</div>
</div>
</div>
<p>@login.successmsg</p>
@code
{
public async Task IsLoginValid()
{
string hashedpassword = await hashTask;
string status = await UserAuth(hashedpassword, login.user);
string successmsg = "";
if (status == "Authenticated!")
{
successmsg = "Authentication successful! Redirecting...";
Redirect();
}
else if (status == "Not Authenticated!")
{
successmsg = "Wrong customer ID, username or password! Please try again!";
}
else
{
successmsg = status;
}
Thread.Sleep(500);
login.successmsg = successmsg;
}
[CascadingParameter]
public ErrorHandler? ErrorHandler { get; set; }
}

也许这对有类似问题的人有帮助。这样就可以结案了

我有同样的需求，在一个Blazor服务器应用程序上，我用这种方式解决了它，我希望它能满足你的需求。我的灵感来自https://askianoor.medium.com/different -方法- -授权的blazor -重定向到登录blazor - 46120 - d629387。

首先，为登录页面创建一个独特的布局，我们将其命名为"loginlayout .razor";例子:

<div class="container py-3">
<link href="css/login.css" rel="stylesheet">
@Body
<LoginError visible="false"/>
</div>

然后，创建一个登录页面，使用登录布局;我们把它命名为"Login.razor":

@layout LoginLayout
@page "/login"
@attribute [AllowAnonymous]
<div class="text-center">
... your logo or whatever
<EditForm class="form-signin mb-4" Model="@_credential" OnSubmit="@Authenticate">
<div class="form-group">
<label for="user-name">User name</label>
<InputText class="form-control" id="user-name" aria-describedby="emailHelp" placeholder="Indirizzo e-mail" @bind-Value=@_credential.UserName />
</div>
<div class="form-group">
<label for="password">Password</label>
<InputText type="password" class="form-control" id="password" placeholder="Password" @bind-Value=@_credential.Password />
</div>
<div class="form-group">
<button type="submit" id="login" name="login" class="btn btn-primary">Login</button>
</div>
... other stuff, like "forgot my password", etc...
</EditForm>
</div>
@code {
public class Credential { public string UserName { get; set; } = ""; public string Password { get; set; } = ""; }
private Credential _credential = new Credential();
private void Authenticate()
{
.... perform authentication using _credential fields
}
}

然后，准备一个目的是重定向到登录页面的组件，我们称它为"RedirectToLogin.razor":

@inject NavigationManager NavigationManager
@code {
[CascadingParameter]
private Task<AuthenticationState>? AuthState { get; set; } = null;
protected override async Task OnInitializedAsync()
{
var authState = await AuthState!;
if (authState?.User?.Identity == null || !authState.User.Identity.IsAuthenticated)
{
var returnUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
if (string.IsNullOrEmpty(returnUrl))
NavigationManager.NavigateTo("/login", true);
else
NavigationManager.NavigateTo("/login?returnUrl=" + returnUrl, true);
}
}
}

最后，最重要的是，修改App.razor，以便在用户未经过身份验证的情况下执行重定向到登录页面:

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" >
<NotAuthorized>
<RedirectToLogin />
</NotAuthorized>
<Authorizing>
<p>Logging in...</p>
</Authorizing>
</AuthorizeRouteView>
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>

相关内容

最新更新

热门标签：