Blazor Server自定义登录逻辑及页面访问权限限制实现咨询

一、客户端登录逻辑实现 #

1. 登录验证与凭证生成 #

在服务端创建登录处理服务，接收前端传入的用户名密码，调用已实现的用户验证逻辑。验证通过后，生成包含用户ID、过期时间的加密凭证字符串（建议用AES等安全加密算法），返回给客户端。同时将凭证与用户信息关联存入服务端缓存（如IMemoryCache），设置对应过期时间。

示例服务端代码：

public async Task<string> LoginAsync(string username, string password)
{
    // 调用已实现的用户验证逻辑
    var validUser = await _userService.ValidateCredentialsAsync(username, password);
    if (validUser == null) return null;

    // 生成加密凭证
    var expireTime = DateTime.Now.AddDays(7);
    var tokenRaw = $"{validUser.Id}|{expireTime:O}";
    var encryptedToken = _encryptionHelper.Encrypt(tokenRaw);

    // 存入服务端缓存
    _cache.Set(encryptedToken, validUser.Id, expireTime);
    return encryptedToken;
}

2. 客户端存储登录凭证 #

通过Blazor JS互操作，将服务端返回的凭证存入浏览器localStorage，完成登录状态的客户端持久化。

示例客户端代码：

@inject IJSRuntime JSRuntime
@inject IAuthService AuthService
@inject NavigationManager NavManager

@code {
    private async Task SubmitLogin(string username, string password)
    {
        var token = await AuthService.LoginAsync(username, password);
        if (!string.IsNullOrWhiteSpace(token))
        {
            await JSRuntime.InvokeVoidAsync("localStorage.setItem", "LoginToken", token);
            NavManager.NavigateTo("/");
        }
    }
}

二、页面访问权限控制 #

1. 自定义权限标记特性 #

创建用于标记需要登录访问页面的特性：

[AttributeUsage(AttributeTargets.Class)]
public class RequiresLoginAttribute : Attribute { }

2. 路由导航拦截 #

修改App.razor中的Router组件，重写OnNavigateAsync方法实现导航拦截，检查目标页面是否需要登录、用户是否已登录：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    [Inject] private IAuthService AuthService { get; set; }
    [Inject] private NavigationManager NavManager { get; set; }

    protected override async Task OnNavigateAsync(NavigationContext context)
    {
        var pageType = context.RouteData.PageType;
        var needsLogin = pageType.GetCustomAttribute<RequiresLoginAttribute>() != null;

        if (needsLogin)
        {
            var isLoggedIn = await AuthService.CheckLoginStatusAsync();
            if (!isLoggedIn)
            {
                // 记录跳转来源，登录后返回
                var returnUrl = Uri.EscapeDataString(context.Path);
                NavManager.NavigateTo($"/login?returnUrl={returnUrl}", true);
                context.CancelNavigation();
            }
        }

        await base.OnNavigateAsync(context);
    }
}

3. 登录状态校验方法 #

在IAuthService中实现登录状态校验逻辑，从localStorage读取凭证并调用服务端验证有效性：

public async Task<bool> CheckLoginStatusAsync()
{
    var token = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "LoginToken");
    if (string.IsNullOrWhiteSpace(token)) return false;

    // 调用服务端接口验证凭证合法性
    return await _apiClient.ValidateTokenAsync(token);
}

三、持久化登录状态（免重复登录） #

1. 页面加载自动恢复登录 #

在MainLayout.razor的初始化方法中，自动尝试恢复登录状态：

@inject IAuthService AuthService

@code {
    protected override async Task OnInitializedAsync()
    {
        await AuthService.RestoreLoginStateAsync();
        await base.OnInitializedAsync();
    }
}

2. 过期与清理机制 #

• 服务端缓存的凭证随过期时间自动失效，可定期清理过期缓存项；
• 客户端校验登录状态时，若凭证已过期，自动清除localStorage中的凭证，引导用户重新登录。

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