Blazor WA应用登录后导航菜单未按角色权限更新问题求解

问题核心原因 #

你的导航菜单仅在组件初始化时读取了一次认证状态，登录操作触发的认证状态变更没有被菜单组件捕获，因此不会重新渲染。强制刷新页面时组件重新初始化，读取到最新的登录状态所以显示正常。

具体修改方案 #

第一步：修改导航菜单组件，订阅认证状态变更事件

调整你NavMenu的@code块代码如下：

@inject AuthenticationStateProvider AuthStateProvider
@code {
    [CascadingParameter]
    public Task<AuthenticationState> AuthState { get; set; }
    private bool collapseNavMenu = true;
    public bool isAuthenticated { get; set; }

    public bool isAdmin { get; set; }
    public bool isUser { get; set; }
    public bool isDev { get; set; }
    public bool isSecondline { get; set; }
    public bool isAppEng { get; set; }
    public bool isTester { get; set; }

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    
    // 抽离公共的角色判断方法
    private async Task RefreshUserRoles()
    {
        var authState = await AuthState;
        isAuthenticated = authState.User.Identity.IsAuthenticated;
        if (isAuthenticated)
        {
            isUser = authState.User.IsInRole(UserRoles.User);
            isDev = authState.User.IsInRole(UserRoles.Developer);
            isSecondline = authState.User.IsInRole(UserRoles.Secondline);
            isAppEng = authState.User.IsInRole(UserRoles.ApplicationEngineer);
            isAdmin = authState.User.IsInRole(UserRoles.Administrator);
            isTester = authState.User.IsInRole(UserRoles.Tester);
        }
        else
        {
            // 未登录时重置所有角色标记
            isUser = isDev = isSecondline = isAppEng = isAdmin = isTester = false;
        }
        StateHasChanged();
    }

    protected override async Task OnInitializedAsync()
    {
        // 初始化时加载一次角色
        await RefreshUserRoles();
        // 订阅认证状态变化事件
        AuthStateProvider.AuthenticationStateChanged += OnAuthStateChanged;
    }

    private async void OnAuthStateChanged(Task<AuthenticationState> newAuthStateTask)
    {
        // 认证状态变化时刷新角色
        AuthState = newAuthStateTask;
        await RefreshUserRoles();
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        AuthStateProvider.AuthenticationStateChanged -= OnAuthStateChanged;
    }
}

第二步：登录逻辑中主动通知认证状态变更

在你处理用户登录成功、存储完JWT令牌的代码位置，添加如下代码通知全局认证状态变化：

// 登录成功后调用，传入你构造的包含用户角色信息的ClaimsPrincipal
await AuthStateProvider.NotifyAuthenticationStateChanged(
    Task.FromResult(new AuthenticationState(yourClaimsPrincipal))
);

可选优化方案 #

你现有页面里的<AuthorizeView>组件本身支持响应认证状态变化，你可以直接用<AuthorizeView Roles="xxx">的方式直接控制菜单显隐，不需要自己维护isAdmin这类标记，简化代码逻辑，示例如下：

<AuthorizeView Roles="@UserRoles.Administrator,@UserRoles.Developer">
    <Authorized>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="Admin">
                <span class="oi material-icons" aria-hidden="true">admin_panel_settings</span> Admin Panel
            </NavLink>
        </li>
    </Authorized>
</AuthorizeView>

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