在 Blazor 组件中提交表单后如何设置本地存储项？

Question

我正在使用 .NET8 Blazor Web 应用程序模板，其中包含身份信息，并添加了

Blazored.LocalStorage

Nuget 包。

我想在用户登录时设置本地存储项，因此在提交表单时调用的

Login.razor

方法中添加了一行（为了清楚起见，删除了不相关的代码）...

  public async Task LoginUser() {
    SignInResult result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
    if (result.Succeeded) {
      await LocalStorage.SetItemAsStringAsync("Greeting", "Hello");
      RedirectManager.RedirectTo(ReturnUrl);
    }
  }

但是，当运行时，我遇到了异常......

InvalidOperationException：此时无法发出 JavaScript 互操作调用。这是因为该组件是静态渲染的。启用预渲染后，只能在 OnAfterRenderAsync 生命周期方法期间执行 JavaScript 互操作调用

好的，所以我在文件顶部添加了以下内容...

@rendermode @(new InteractiveServerRenderMode(prerender: false))

但是，这给出了不同的例外......

System.InvalidOperationException：标头是只读的，响应已开始

我现在有点卡住了。谁能解释一下我是如何做到这一点的？

谢谢

Answer 1

首先，身份页面仅在 SSR（静态服务器渲染）中工作。因为“SignInManager.PasswordSignInAsync”实际上运行一些类似于“HttpContext.SigninAsync”的逻辑，需要

HttpContext

才能工作。 所以你不能添加像

@rendermode @(new InteractiveServerRenderMode(prerender: false))

之类的东西来将其更改为其他模式。

不幸的是，在SSR中，你无法操作浏览器本地存储。 Blazored.localstorage 也不支持这一点。您可以导航到另一个交互式渲染模式页面来实现此行为。如：

本地存储.razor

@page "/localstroage/{key}/{value}/{RetrunUrl}"
@rendermode @(new InteractiveServerRenderMode(prerender: false))
@inject Blazored.LocalStorage.ILocalStorageService LocalStorage

@code {
    [Parameter]
    public string key { get; set; }
    [Parameter]
    public string value { get; set; }
    [Parameter]
    public string ReturnUrl { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        await LocalStorage.SetItemAsStringAsync(key, value);
        RedirectManager.RedirectTo(ReturnUrl);
    }
}

然后您可以导航到此页面将值保存到本地存储。

@inject NavigationManager Navigation
...
        if (result.Succeeded)
        {
            Navigation.NavigateTo.($"/localstorage/Greeting/Hello/{ReturnUrl});
        }