如何在ServerPrerendered渲染模式的Blazor Server应用中访问LocalStorage/SessionStorage存储JWT令牌？

我完全懂你的纠结——既想保住ServerPrerendered带来的初始预渲染、页面加载速度这些优势，又要解决JWT令牌的存储问题。核心矛盾其实很明确：预渲染阶段是在服务器端执行的，根本无法访问浏览器的LocalStorage/SessionStorage，直接在组件初始化时调用这些API肯定会报错。下面给你几个落地可行的方案，一步步解决：

方案一：区分预渲染与客户端阶段，安全封装LocalStorage操作 #

首先要做的是判断代码运行环境，只在客户端阶段去调用浏览器的存储API。Blazor提供了现成的工具帮我们做这个判断，同时我们可以封装一个服务来统一处理JS互操作逻辑。

1. 编写LocalStorage封装服务 #

创建一个Scoped服务，把预渲染判断和JS调用逻辑封装起来：

public class LocalStorageService
{
    private readonly IJSRuntime _jsRuntime;
    private readonly NavigationManager _navigationManager;

    public LocalStorageService(IJSRuntime jsRuntime, NavigationManager navigationManager)
    {
        _jsRuntime = jsRuntime;
        _navigationManager = navigationManager;
    }

    public async Task<string> GetItemAsync(string key)
    {
        // 预渲染阶段直接返回null，避免触发浏览器API报错
        if (_navigationManager.IsPreRendering)
            return null;

        return await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
    }

    public async Task SetItemAsync(string key, string value)
    {
        if (_navigationManager.IsPreRendering)
            return;

        await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value);
    }

    public async Task RemoveItemAsync(string key)
    {
        if (_navigationManager.IsPreRendering)
            return;

        await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
    }
}

然后在Program.cs里注册这个服务：

builder.Services.AddScoped<LocalStorageService>();

2. 在组件中安全调用 #

一定要在客户端渲染完成后再去访问LocalStorage，也就是用OnAfterRenderAsync生命周期方法，而不是OnInitializedAsync（后者会在预渲染阶段执行）：

@inject LocalStorageService LocalStorage
@inject NavigationManager NavManager

@code {
    private string _currentJwtToken;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 只在客户端首次渲染后执行一次
        if (firstRender && !NavManager.IsPreRendering)
        {
            _currentJwtToken = await LocalStorage.GetItemAsync("jwt_token");
            
            // 如果读取到令牌，就初始化认证状态（比如设置Http请求头）
            if (!string.IsNullOrEmpty(_currentJwtToken))
            {
                // 这里写你的认证逻辑，比如配置HttpClient的Authorization头
            }
        }
    }

    // 登录成功后存储令牌
    private async Task HandleLoginSuccess(string token)
    {
        await LocalStorage.SetItemAsync("jwt_token", token);
        // 跳转到主页等后续操作
    }
}

方案二：用成熟的社区库简化操作 #

如果你不想自己写封装，可以直接用社区维护的Blazored.LocalStorage库，它已经内置了预渲染阶段的安全判断，开箱即用：

1. 安装NuGet包：Install-Package Blazored.LocalStorage
2. 在Program.cs注册服务：

builder.Services.AddBlazoredLocalStorage();

3. 组件中注入IBrowserStorageService，用法和自己封装的服务完全一致，它会自动跳过预渲染阶段的调用。

方案三：替代存储方案——HttpOnly Cookie（更安全） #

如果担心LocalStorage的XSS风险（JWT存在LocalStorage中容易被XSS攻击窃取），可以考虑用HttpOnly Cookie存储令牌：

• 后端登录接口验证成功后，将JWT存入HttpOnly、Secure、SameSite的Cookie中
• Blazor Server的预渲染请求会自动携带Cookie，服务器可以直接读取令牌进行认证
• 客户端后续的API请求也会自动携带Cookie，无需手动处理
• 注意要启用CSRF防护，Blazor Server默认已经集成了AntiForgery，只需要确保请求带上对应的令牌即可

这种方案的优势是令牌无法被浏览器JS访问，从根源上避免了XSS窃取的风险，同时完美适配预渲染模式。

关键注意事项 #

1. 预渲染阶段绝对不能碰浏览器API：任何涉及window、localStorage的JS调用，都必须先判断IsPreRendering，否则会抛出JavaScript互操作的异常。
2. 处理预渲染与客户端的状态差异：预渲染阶段没有令牌，页面会显示未认证状态，客户端初始化后拿到令牌再更新UI，建议添加加载过渡效果避免用户困惑。
3. 安全优先级：如果你的应用对安全要求较高，优先选择HttpOnly Cookie方案；如果需要客户端能读取令牌（比如前端要解析令牌信息），再考虑LocalStorage/SessionStorage。

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