登录后用NavigationManager.NavigateTo()访问ProtectedLocalStorage异常

问题现象 #

• 登录成功后将JWT Token存入protectedLocalStorage，调用NavigationManager.NavigateTo()跳转至带[Authorize]属性的页面时，GetAuthenticationStateAsync()读取protectedLocalStorage返回null，触发重定向回登录页。
• 直接点击链接或手动输入URL访问授权页面时，存储读取正常，仅程序内跳转时出现异常。
• 登录页设为交互式服务器渲染时会触发无限重载，目前只能设为静态渲染，但静态渲染下无法解决跳转后的存储读取问题。

核心代码片段 #

登录页跳转逻辑 #

await protectedLocalStorage.SetAsync("authToken", token);
NavigationManager.NavigateTo(ReturnUrl ?? "");

Token读取逻辑（AuthenticationStateProvider内） #

ProtectedBrowserStorageResult<string> result;
try
{
    result = await protectedLocalStorage.GetAsync<string>("authToken"); //跳转后此处返回null
}
catch
{
    result = new();
}

var anonymous = new ClaimsPrincipal(new ClaimsIdentity());

if (!result.Success) //读取失败，返回匿名身份触发重定向
{
    return new AuthenticationState(anonymous);
}

App.razor渲染模式配置 #

<Routes @rendermode="@RenderModeForPage"/>

@code {
     [CascadingParameter] private HttpContext HttpContext { get; set; } = default!;

     private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account/Login") ? null : new InteractiveServerRenderMode(prerender: false);
     //登录页设为交互式服务器渲染时会无限重载，因此暂设为静态渲染
}

登录页无限重载根源（AccountLayout代码） #

protected override void OnParametersSet()
{
    if (HttpContext is null)
    {
        // 交互式渲染下无HttpContext，认为需要操作Cookie，强制刷新切回服务器渲染
        NavigationManager.Refresh(forceReload: true);
    }
}

解决方案 #

方案一：修复登录页交互式渲染的无限重载问题 #

问题核心是AccountLayout的无差别强制刷新逻辑，修改后可让登录页正常使用交互式渲染，此时protectedLocalStorage的写入和跳转读取处于同一会话，不会出现null异常。

方法1：优化AccountLayout的渲染切换逻辑

添加防循环标记，避免无限刷新：

protected override void OnParametersSet()
{
    // 仅在登录页且无HttpContext时，才触发渲染模式切换
    var isLoginPage = HttpContext?.Request.Path.StartsWithSegments("/Account/Login") ?? false;
    if (HttpContext is null && isLoginPage)
    {
        // 通过URL参数标记已处理，避免循环重载
        if (!NavigationManager.Uri.Contains("?renderFix=true"))
        {
            NavigationManager.NavigateTo($"{NavigationManager.Uri}?renderFix=true", forceReload: true);
        }
    }
}

方法2：给登录页指定独立Layout

跳过AccountLayout的逻辑，在登录页组件顶部添加：

@layout MainLayout

修改完成后，调整App.razor的渲染模式配置，让登录页使用交互式服务器渲染：

private IComponentRenderMode? RenderModeForPage => new InteractiveServerRenderMode(prerender: false);

方案二：静态渲染下解决跳转后存储读取问题 #

若坚持使用静态渲染登录页，问题在于客户端跳转时，授权页面的初始服务器端渲染无法访问浏览器存储，导致读取失败。可通过以下方式解决：

方法1：跳转时强制刷新页面

确保授权页面在客户端加载后再读取存储：

await protectedLocalStorage.SetAsync("authToken", token);
// 强制刷新页面，确保Token已存入本地存储后再跳转
NavigationManager.NavigateTo(ReturnUrl ?? "", forceReload: true);

方法2：在AuthenticationStateProvider中区分服务器/客户端环境

服务器端返回匿名身份，等待客户端初始化后再重新读取存储：

public override async Task<AuthenticationState> GetAuthenticationStateAsync()
{
    // 检查是否在浏览器环境运行
    if (!OperatingSystem.IsBrowser())
    {
        // 服务器端无法访问本地存储，返回匿名身份
        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
    }

    ProtectedBrowserStorageResult<string> result;
    try
    {
        result = await protectedLocalStorage.GetAsync<string>("authToken");
    }
    catch
    {
        result = new();
    }

    if (result.Success && !string.IsNullOrEmpty(result.Value))
    {
        // 解析JWT Token生成ClaimsPrincipal
        var claims = ParseToken(result.Value); // 需实现自己的Token解析逻辑
        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, "JWT")));
    }

    return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
}

内容的提问来源于stack exchange，提问作者Ahmed