[RFC] 116 - 保护路由模式

[arvinxx]

背景

目前，LobeChat 的大部分路由均可匿名访问。很多 issue 提到了希望在公开场景下先完成登录，再进入具体内部页面 的需求。

• [Request] 建议对认证提供商增加一个默认配置项 #5055
• [Request] Block page for unauthorized users #4297
• [Request] 访问密码的建议 #3200

之前不太清楚怎么做，今年在做过 #5461 后对于 middleware 有了更加深入的了解，因此应该可以做了。

本 RFC 旨在为 LobeChat 添加受保护路由 (Protected Routes) 功能。该功能将限制对应用程序中特定页面的访问，要求用户必须先完成身份验证才能进入这些页面，未通过身份验证的用户将被重定向到登录页面。

设计思路

核心实现将依赖 Next.js 的中间件 (Middleware) 功能，在请求到达页面组件之前进行统一的身份验证检查和路由控制。

const isPublicRoute = createRouteMatcher([
  '/api/auth(.*)',
  '/trpc/edge(.*)',
  // next auth
  '/next-auth/(.*)',
  // clerk
  '/login',
  '/signup',
]);

const nextAuthMiddleware = NextAuthEdge.auth((req) => {

  // when enable auth protection, only public route is not protected, others are all protected
  const isProtected = appEnv.ENABLE_AUTH_PROTECTION ? !isPublicRoute(req) : isProtectedRoute(req);

 // Just check if session exists
  const session = req.auth;

  // Check if next-auth throws errors
  // refs: https://github.com/lobehub/lobe-chat/pull/1323
  const isLoggedIn = !!session?.expires;

  // Remove & amend OAuth authorized header
  response.headers.delete(OAUTH_AUTHORIZED);
  if (isLoggedIn) {
    response.headers.set(OAUTH_AUTHORIZED, 'true');

  } else {
    // If request a protected route, redirect to sign-in page
    // ref: https://authjs.dev/getting-started/session-management/protecting
    if (isProtected) {
      const nextLoginUrl = new URL('/next-auth/signin', req.nextUrl.origin);
      nextLoginUrl.searchParams.set('callbackUrl', req.nextUrl.pathname);
      return Response.redirect(nextLoginUrl);
    }
  }

通过环境变量： ENABLE_AUTH_PROTECTION 开启。

进展

• ✨ feat: support protect page #8024