如何在Blazor WebAssembly .NET7.0中便捷使用Session Storage控制Razor内容显隐

1. 封装Session Storage操作服务 #

先实现一个可注入的服务，封装JS互操作的Session Storage方法，避免组件重复编写底层逻辑：

public interface ISessionStorageService
{
    Task<string> GetItemAsync(string key);
    Task SetItemAsync(string key, string value);
    Task RemoveItemAsync(string key);
    Task ClearAsync();
}

public class SessionStorageService : ISessionStorageService
{
    private readonly IJSRuntime _jsRuntime;

    public SessionStorageService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task<string> GetItemAsync(string key)
    {
        return await _jsRuntime.InvokeAsync<string>("sessionStorage.getItem", key);
    }

    public async Task SetItemAsync(string key, string value)
    {
        await _jsRuntime.InvokeVoidAsync("sessionStorage.setItem", key, value);
    }

    public async Task RemoveItemAsync(string key)
    {
        await _jsRuntime.InvokeVoidAsync("sessionStorage.removeItem", key);
    }

    public async Task ClearAsync()
    {
        await _jsRuntime.InvokeVoidAsync("sessionStorage.clear");
    }
}

在Program.cs中注册该服务：

builder.Services.AddScoped<ISessionStorageService>();

2. 状态管理（可选但推荐） #

如果需要组件监听Session Storage的变化（比如其他组件修改存储项后自动刷新UI），可以创建带事件的状态服务：

public class AuthStateService
{
    private readonly ISessionStorageService _sessionStorage;
    private bool _isAuthenticated;
    public bool IsAuthenticated 
    { 
        get => _isAuthenticated;
        set
        {
            if (_isAuthenticated != value)
            {
                _isAuthenticated = value;
                AuthStateChanged?.Invoke(this, EventArgs.Empty);
            }
        }
    }

    public event EventHandler AuthStateChanged;

    public AuthStateService(ISessionStorageService sessionStorage)
    {
        _sessionStorage = sessionStorage;
    }

    public async Task InitializeAsync()
    {
        // 读取Session Storage中的身份标识，比如你提到的"Cookie"对应存储项
        var authFlag = await _sessionStorage.GetItemAsync("authCookie");
        IsAuthenticated = !string.IsNullOrEmpty(authFlag);
    }
}

同样在Program.cs注册：

builder.Services.AddScoped<AuthStateService>();

在App.razor中初始化状态并监听变化：

@inject AuthStateService AuthState
@implements IDisposable

protected override async Task OnInitializedAsync()
{
    await AuthState.InitializeAsync();
    AuthState.AuthStateChanged += AuthState_AuthStateChanged;
}

private void AuthState_AuthStateChanged(object sender, EventArgs e)
{
    StateHasChanged();
}

public void Dispose()
{
    AuthState.AuthStateChanged -= AuthState_AuthStateChanged;
}

3. 在Razor组件中控制内容显示 #

方式1：直接调用Session Storage服务 #

在组件中注入服务，直接判断存储项：

@inject ISessionStorageService SessionStorage

@if (!string.IsNullOrEmpty(await SessionStorage.GetItemAsync("authCookie")))
{
    <div>仅授权用户可见的内容</div>
}
else
{
    <div>未授权时显示的内容</div>
}

方式2：使用状态服务（支持自动更新） #

借助AuthStateService可以更简洁地实现，且状态变化时自动刷新UI：

@inject AuthStateService AuthState
@inject ISessionStorageService SessionStorage

@if (AuthState.IsAuthenticated)
{
    <NavLink href="/profile">个人中心</NavLink>
    <button @onclick="Logout">退出登录</button>
}
else
{
    <NavLink href="/login">登录</NavLink>
}

@code {
    private async Task Logout()
    {
        await SessionStorage.RemoveItemAsync("authCookie");
        AuthState.IsAuthenticated = false;
        // 可添加页面跳转逻辑
    }
}

方式3：封装通用权限组件 #

编写复用性更高的自定义组件，统一处理权限判断：

@inject AuthStateService AuthState
@if (AuthState.IsAuthenticated)
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

使用时只需包裹需要权限控制的内容：

<AuthenticatedContent>
    <div>需要授权才能查看的内容</div>
</AuthenticatedContent>

注意事项 #

• Blazor WebAssembly运行在客户端，Session Storage的数据仅存在当前浏览器标签页，关闭标签即丢失；若需跨标签页共享，可改用Local Storage。
• 不要在Session Storage中存储敏感数据，因为它以明文形式存储在客户端。
• 若你提到的"Cookie"是指HttpOnly Cookie，Blazor WebAssembly无法直接读取这类Cookie，需通过后端API接口验证身份状态。

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