隐藏组件，直到它的身份验证完成

Question

在 Blazor Server 应用程序中，我们通过将用户详细信息存储在表中来使用简单的 SQL Server 数据库身份验证。应用的第一个路由是“https://localhost:44349/login”。

我们提供了邮件地址和密码作为凭据，它导航到“https://localhost:44349/valuation”。

在那之前一切都很好。我们将用户详细信息存储在会话中。

            await sessionStorage.SetItemAsync("email", result.Email);
            await sessionStorage.SetItemAsync("role", result.TipoUtilizador);
            await sessionStorage.SetItemAsync("Name", result.Nome);
            UriHelper.NavigateTo("valuation");

如果我们打开一个新标签，直接复制“https://localhost:44349/valuation”，就有问题需要解决。

将链接复制到新标签“https://localhost:44349/valuation” 我们在“OnInitializedAsync”方法中检查会话存储值 现在，没有匹配值的会话存储，它导航回登录页面。

但问题是，我们可以在导航到登录页面之前看到 UI 元素

        var email = await sessionStorage.GetItemAsync<string>("email");
        if (string.IsNullOrEmpty(email))
        {
            var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
            var destination = string.IsNullOrWhiteSpace(returnUrl) ? "/login" : $"/login?returnUrl={returnUrl}";
            Navigation.NavigateTo(destination, true);
        }

这个 h1 标签来自评估组件，它在导航到登录页面之前显示。 （在实际情况下，我们有很多 HTML 控件，例如按钮、选择等。我们想要隐藏）

我检查了 blazor 文档，发现在组件包含在渲染树中并准备好接受数据之后调用 OnInitializedAsync。

请帮我解决这个简单身份验证的问题。

Answer 1

在<AuthorizeView></AuthorizeView> 元素中对用户进行身份验证之前包装您不希望可见的元素。