Vue.js+Vite项目能否集成基于Razor的ASP.NET Core Identity认证流程？

以下是具体实现步骤，全程使用Cookie认证，不依赖JWT或外部认证提供商：

1. 后端ASP.NET Core配置调整 #

1.1 启用Identity默认UI #

确保你的ASP.NET Core项目已通过脚手架生成默认Identity UI（包含Razor页面的登录/注册/登出等功能）。如果还没添加，可通过以下命令生成：

dotnet aspnet-codegenerator identity -dc YourDbContext -u

并在Program.cs中注册Identity服务：

builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddEntityFrameworkStores<YourDbContext>();

1.2 配置Cookie与跨域认证 #

在Program.cs中调整Cookie认证设置，允许跨域携带Cookie，并配置CORS策略：

// 配置Cookie认证
builder.Services.ConfigureApplicationCookie(options =>
{
    options.Cookie.Name = "YourAppCookie";
    options.Cookie.SameSite = SameSiteMode.Lax; // 跨域场景可设为None（需HTTPS）
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 生产环境启用HTTPS
    options.LoginPath = "/Account/Login";
    options.LogoutPath = "/Account/Logout";
    options.AccessDeniedPath = "/Account/AccessDenied";
});

// 配置CORS允许前端域名携带Cookie
builder.Services.AddCors(options =>
{
    options.AddPolicy("VueCorsPolicy", policy =>
    {
        policy.WithOrigins("http://localhost:5173") // 你的Vite前端地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 关键：允许携带Cookie
    });
});

// 启用CORS
app.UseCors("VueCorsPolicy");

2. 前端Vite代理配置修改 #

在vite.config.ts中更新代理设置，确保请求后端时携带Cookie：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:5001', // 后端API地址
        changeOrigin: true,
        withCredentials: true, // 关键：允许携带Cookie
        secure: false // 开发环境忽略HTTPS证书验证
      },
      // 代理Identity相关路由（比如登录页面）
      '/Account': {
        target: 'https://localhost:5001',
        changeOrigin: true,
        withCredentials: true
      }
    }
  }
})

3. 前端认证逻辑改造 #

3.1 替换登录状态检查逻辑 #

不再调用Identity API端点，改为请求后端的受保护接口判断登录状态。后端新增一个受保护的接口：

[ApiController]
[Route("api/auth")]
public class AuthController : ControllerBase
{
    [HttpGet("check")]
    [Authorize]
    public IActionResult CheckAuth()
    {
        return Ok(new { 
            Email = User.Identity?.Name,
            IsAuthenticated = User.Identity?.IsAuthenticated ?? false
        });
    }
}

前端修改isSignedIn和fetchUserInfo逻辑：

async function fetchUserInfo() {
  try {
    const response = await fetch('/api/auth/check', {
      method: 'GET',
      credentials: 'include' // 关键：携带Cookie
    });

    if (!response.ok) {
      throw new Error('未认证');
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    return null;
  }
}

async isSignedIn() {
  const userInfo = await fetchUserInfo();
  const isValid = !!(userInfo?.IsAuthenticated);

  this.$patch({
    name: userInfo?.Email,
    isAuthenticated: isValid
  });

  return isValid;
}

3.2 调整路由守卫的跳转逻辑 #

当未认证时，跳转到后端的Razor登录页面，并携带前端当前页面作为返回地址：

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();

  if (to.matched.some(record => record.meta.requiresAuth)) {
    const isSignedIn = await authStore.isSignedIn();

    if (!isSignedIn) {
      // 跳转到后端登录页面，登录成功后返回当前前端页面
      const returnUrl = encodeURIComponent(window.location.href);
      window.location.href = `/Account/Login?returnUrl=${returnUrl}`;
    } else {
      next();
    }
  } else {
    next();
  }
});

3.3 登出逻辑 #

前端登出时直接跳转到后端的Razor登出页面：

async signOut() {
  window.location.href = '/Account/Logout';
}

4. 关键注意事项 #

• HTTPS要求：如果生产环境前后端是跨域域名，Cookie的SameSite需设为None，且必须启用HTTPS，否则浏览器会阻止Cookie跨域传输。
• 开发环境配置：可在launchSettings.json中启用后端HTTPS，同时Vite前端也可通过server.https: true启用HTTPS，避免Cookie被拦截。
• 用户字段扩展：如需扩展用户字段，可直接修改IdentityUser派生类，在Razor UI中调整对应的页面（比如注册页面添加自定义字段），无需依赖Identity API端点。

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