Blazor使用内存中状态容器服务保存和验证登陆状态

程序笔记 2024年10月11日09:04

想用Blazor做一个简单的登录验证。模式是render-mode="ServerPrerendered"。在登录页面登录成功后需要保存类似.NET MVC网站的服务端session的状态。

网上一些简单的做法是登录成功后把用户信息存在LocalStorage或者SessionStorage中，然后在页面加载时检查是否存有用户信息，如果存在就是已经登录，否则跳转到登录页面。但是这样的话无法在OnInitialized中读写LocalStorage或者SessionStorage检查用户登陆状态，否则会报错：

InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

需要在OnAfterRenderAsync中读写。

这样就很有问题，我们希望服务端渲染，如果在OnAfterRenderAsync才检查用户状态，那么OnInitialized的代码实际上已经执行了，这样就没有意义了。

在微软网站上看到有个内存中状态容器服务，可以存放状态。

首先创建一个UserState类，可以包含用户信息属性，下面是例子：

    public class UserState
    {
        public bool IsLoggedIn { get; set; }
    }

然后在Program.cs文件中注册服务：

builder.Services.AddScoped<UserState>();

在登录页面，验证成功了就改变登录状态，下面只是一个例子，所以hardcode了用户名。

private void HnadleLogin()
    {
        if (loginId == "xxx" && password == "xxx")
        {
            UserState.IsLoggedIn = true;
            NavigationManager.NavigateTo("/manage");
        }
        else
        {
            failed = true;
            loginId = string.Empty;
            password = string.Empty;
        }

在Layout页面里检查登录状态，如果没有登陆就跳转到登录页面：

@code {
    protected override async Task OnInitializedAsync()
    {
        if (!UserState.IsLoggedIn)
        {
            NavigationManager.NavigateTo("/");
        }
    }
}

声明本站内容部分来源于网络，仅供参考学习交流并不代表本站观念，如无意中侵犯您的权益（包括/图片/视频/个人隐私等信息）请来信告知，本站收到信息会尽快处理并回访，联系邮箱：laodilailiao@foxmail.com