导航后不保留 AuthenticationState答案

【问题标题】：AuthenticationState is not persisted after navigation导航后不保留 AuthenticationState
【发布时间】：2020-04-18 12:58:28
【问题描述】：

我已将以下自定义登录添加到默认 Blazor 应用模板的 index.razor（无身份验证）。

<form>
    <button @onclick="SignIn">Sign in</button>
</form>
@inject AuthenticationStateProvider AuthenticationStateProvider
@code {
    private string userName = "FakeUser";

    private async Task SignIn(MouseEventArgs e)
    {
        var fakeUser = new ClaimsPrincipal(new ClaimsIdentity(new[]
        {
            new Claim(ClaimTypes.Name, userName),
        }, "Fake authentication type"));

        var provider = (IHostEnvironmentAuthenticationStateProvider)AuthenticationStateProvider;
        //provider is ServerAuthenticationStateProvider

        provider.SetAuthenticationState(Task.FromResult(new AuthenticationState(fakeUser)));

        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        //authState.User.Identity.Name == "Fake User" - this is ok
    }
}

但是，当我导航到另一个页面时，authState 不会持久化：

protected override async Task OnInitializedAsync()
{
    var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
    //authState.User.Identity.Name == null ??
}

为什么？

【问题讨论】：

标签： authentication blazor blazor-server-side

【解决方案1】：

我运行了您的代码，它确实保留了身份验证状态...

这是我的代码：

Index.razor

@page "/"

@using System.Security.Claims;

<button @onclick="SignIn">Sign in</button>

@inject AuthenticationStateProvider AuthenticationStateProvider

@code {
    private string userName = "FakeUser";

    private async Task SignIn(MouseEventArgs e)
   {
      var fakeUser = new ClaimsPrincipal(new ClaimsIdentity(new[]
     {
        new Claim(ClaimTypes.Name, userName),
     }, "Fake authentication type"));

    var provider = 
    (IHostEnvironmentAuthenticationStateProvider)AuthenticationStateProvider;
    //provider is ServerAuthenticationStateProvider

    provider.SetAuthenticationState(Task.FromResult(new 
                                         AuthenticationState(fakeUser)));

    var authState = await 
               AuthenticationStateProvider.GetAuthenticationStateAsync();
               Console.WriteLine(authState.User.Identity.Name);


   }
}

Counter.razor

    @page "/counter"

    @inject AuthenticationStateProvider AuthenticationStateProvider


   @code {

         protected override async Task OnInitializedAsync()
         {
              var authState = await 
                   AuthenticationStateProvider.GetAuthenticationStateAsync();
              Console.WriteLine(authState.User.Identity.Name);
   }
 }

请运行您的应用程序，单击按钮元素，然后按 NavMenu 中的“计数器”菜单项以导航到计数器组件...现在转到“输出”窗口，查看 FakeUser 一词是否打印了两次。

【讨论】：

好吧，对我不起作用。你能在某个地方分享你的整个项目吗？或者至少是你的 startup.cs
啊，我的登录按钮元素在表单元素中，它会重新加载整个页面，导致重置状态

【解决方案2】：

问题在于，原生 <form> 元素中的 <button> 是因为它提交表单（重新加载页面）

<form>
    <button @onclick="SignIn">Sign in</button>
</form>

解决方案：

使用<EditForm> 或

<button type="button" @onclick="SignIn">Sign in</button>

【讨论】：