Blazor WASM 登出成功后如何实现自动重定向到登录页

问题现象 #

用户完成登出操作后，页面仅停留在如下登出成功提示页，不会自动跳转：

实现方案 #

方案1：修改默认身份验证页逻辑（推荐） #

默认Blazor WASM身份验证相关逻辑都封装在Pages/Authentication.razor文件中，直接修改该文件的登出成功分支逻辑即可：

1. 首先在文件顶部注入导航服务：

@inject NavigationManager NavManager

2. 找到<LogOutSucceeded>节点，添加跳转逻辑，支持自定义是否展示登出提示：

• 无需展示提示，直接跳转的写法：

<RemoteAuthenticatorView Action="@Action">
    <!-- 其他节点保持不变 -->
    <LogOutSucceeded>
        @{
            NavManager.NavigateTo("/authentication/login", forceLoad: false);
        }
    </LogOutSucceeded>
</RemoteAuthenticatorView>

• 需要保留2秒登出提示再跳转的写法：

<RemoteAuthenticatorView Action="@Action">
    <!-- 其他节点保持不变 -->
    <LogOutSucceeded>
        <p>您已成功登出，即将跳转至登录页...</p>
        @{
            _ = DelayedRedirect();
        }
    </LogOutSucceeded>
</RemoteAuthenticatorView>

@code {
    [Parameter] public string Action { get; set; }
    
    private async Task DelayedRedirect()
    {
        await Task.Delay(2000);
        NavManager.NavigateTo("/authentication/login");
    }
}

方案2：自定义登出按钮逻辑 #

如果你的项目未使用默认的<RemoteAuthenticatorView>组件，自己实现了登出触发逻辑，可直接在登出方法中添加跳转：

@inject NavigationManager NavManager
@inject IAuthenticationService AuthService

<button @onclick="HandleLogout">退出登录</button>

@code {
    private async Task HandleLogout()
    {
        // 执行登出逻辑
        await AuthService.SignOutAsync();
        // 补充清空本地存储的用户信息等自定义操作
        await localStorage.RemoveItemAsync("userInfo");
        // 跳转至登录页
        NavManager.NavigateTo("/login", forceLoad: true);
    }
}

注意事项 #

如果对接的是第三方OIDC身份提供商，需要提前在身份提供商后台配置允许的登出后重定向地址，避免跳转被拦截。

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