ASP.NET Core MVC未认证时独立登录注册页的实现指南

1. 修改主布局文件 _Layout.cshtml #

通过User.Identity.IsAuthenticated判断用户认证状态，动态控制页眉、页脚、侧边栏的显示，同时为未认证场景添加全屏登录/注册样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - POS系统</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    
    <!-- 未认证时的全屏登录样式 -->
    @if (!User.Identity.IsAuthenticated)
    {
        <style>
            body {
                margin: 0;
                padding: 0;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f8f9fa;
            }
            .auth-container {
                width: 100%;
                max-width: 420px;
                padding: 2.5rem;
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 0 15px rgba(0,0,0,0.08);
            }
        </style>
    }
</head>
<body>
    <!-- 已认证用户的侧边栏 + 页眉 -->
    @if (User.Identity.IsAuthenticated)
    {
        <div class="sidebar bg-dark text-white p-3" style="width: 220px; height: 100vh; position: fixed;">
            <h5>POS系统导航</h5>
            <ul class="nav flex-column mt-3">
                <li class="nav-item mb-2"><a class="nav-link text-white" asp-controller="Home" asp-action="Index">首页</a></li>
                <li class="nav-item mb-2"><a class="nav-link text-white" asp-controller="Sales" asp-action="Index">销售管理</a></li>
                <li class="nav-item mb-2"><a class="nav-link text-white" asp-controller="Inventory" asp-action="Index">库存管理</a></li>
            </ul>
        </div>

        <header class="header ms-5" style="margin-left: 220px;">
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                <div class="container-fluid">
                    <span class="navbar-brand">POS系统</span>
                    <div class="navbar-collapse justify-content-end">
                        <span class="nav-link me-3">欢迎, @User.Identity.Name</span>
                        <a class="nav-link" asp-controller="Account" asp-action="Logout">退出登录</a>
                    </div>
                </div>
            </nav>
        </header>
    }

    <!-- 内容容器：根据认证状态切换样式 -->
    <div class="@(User.Identity.IsAuthenticated ? "main-content ms-5 pt-4" : "auth-container")" style="@(User.Identity.IsAuthenticated ? "margin-left: 220px;" : "")">
        <main role="main">
            @RenderBody()
        </main>
    </div>

    <!-- 已认证用户的页脚 -->
    @if (User.Identity.IsAuthenticated)
    {
        <footer class="footer mt-auto py-3 bg-light ms-5" style="margin-left: 220px;">
            <div class="container text-center">
                <span class="text-muted">&copy; 2024 POS系统 - 版权所有</span>
            </div>
        </footer>
    }

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

2. 登录/注册页面的布局处理 #

为保证登录/注册页面始终全屏显示，可在对应视图中指定空布局：

示例：Login.cshtml #

@{
    Layout = null; // 不加载主布局，直接渲染登录表单
    ViewData["Title"] = "登录";
}

<div class="text-center mb-4">
    <h1 class="h3 mb-3 font-weight-normal">POS系统登录</h1>
</div>

<form asp-controller="Account" asp-action="Login" method="post">
    <div class="form-floating mb-3">
        <input asp-for="Email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label asp-for="Email">邮箱</label>
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-floating mb-3">
        <input asp-for="Password" type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label asp-for="Password">密码</label>
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <div class="checkbox mb-3">
        <label>
            <input asp-for="RememberMe" type="checkbox"> 记住我
        </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">登录</button>
    <p class="mt-5 mb-3 text-muted text-center">还没有账号？<a asp-action="Register">立即注册</a></p>
</form>

3. 核心逻辑说明 #

• 认证状态判断：User.Identity.IsAuthenticated是ASP.NET Core身份认证框架提供的内置属性，直接返回当前用户的认证状态。
• 样式动态切换：未认证时通过内联CSS实现全屏居中效果，已认证时加载完整的侧边栏、页眉、页脚布局。
• 路由与权限控制：确保Account控制器的Login/Register动作允许匿名访问，在Program.cs中配置认证中间件：

// Program.cs 关键配置
builder.Services.AddDefaultIdentity<IdentityUser>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

app.UseAuthentication();
app.UseAuthorization();

// 允许匿名访问登录/注册页面
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}")
    .RequireAuthorization();
app.MapControllerRoute(
    name: "auth",
    pattern: "{controller=Account}/{action=Login}/{id?}");
app.MapControllerRoute(
    name: "register",
    pattern: "{controller=Account}/{action=Register}/{id?}");

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