Next.js 13不使用next-auth对接自定义Express后端认证方案咨询

一、当前方案的可行性确认 #

你现在通过客户端fetch请求后端、获取包含JWT的cookie并解码显示用户信息的逻辑是完全可行的。Next.js 13的客户端组件完全支持浏览器的cookie机制，只要在fetch时配置credentials: 'include'（确保跨域请求时也能携带cookie），就能正常和你的Express后端完成认证交互。目前逻辑运行正常，说明这套流程没有问题，可以继续沿用。

二、不依赖next-auth的其他认证实现方式 #

1. 客户端层面优化方案 #

• 封装自定义认证Hook：把获取用户状态、登录、登出的逻辑封装成useAuth Hook，统一复用认证逻辑，示例代码如下：

  import { useState, useEffect } from 'react';
  import jwtDecode from 'jwt-decode';
  
  export const useAuth = () => {
    const [user, setUser] = useState(null);
  
    useEffect(() => {
      const checkAuthStatus = async () => {
        const res = await fetch('https://your-express-backend/auth/status', {
          credentials: 'include'
        });
        if (res.ok) {
          const { token } = await res.json();
          const decodedUser = jwtDecode(token);
          setUser(decodedUser);
        }
      };
      checkAuthStatus();
    }, []);
  
    const login = async (credentials) => {
      const res = await fetch('https://your-express-backend/auth/login', {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(credentials),
        headers: { 'Content-Type': 'application/json' }
      });
      if (res.ok) {
        // 登录成功后更新用户状态
        const { token } = await res.json();
        setUser(jwtDecode(token));
      }
    };
  
    const logout = async () => {
      await fetch('https://your-express-backend/auth/logout', {
        credentials: 'include'
      });
      setUser(null);
    };
  
    return { user, login, logout };
  };
  

• 全局状态管理：用React Context、Zustand或Jotai等状态库，将用户信息存在全局状态中。登录后更新全局状态，导航栏或其他组件直接从全局读取用户信息，不用每次重复解码JWT或请求后端。

• 客户端路由守卫：使用Next.js的useRouter钩子，在需要权限的组件里检查用户状态，未登录时自动跳转到登录页。示例代码：

  import { useRouter } from 'next/navigation';
  import { useAuth } from './hooks/useAuth';
  
  const ProtectedPage = () => {
    const { user } = useAuth();
    const router = useRouter();
  
    useEffect(() => {
      if (!user) {
        router.push('/login');
      }
    }, [user, router]);
  
    if (!user) return <div>加载中...</div>;
  
    return <div>受保护的页面内容</div>;
  };
  

2. 服务端层面扩展方案（若后续需要SSR/SSG） #

如果你之后需要做服务端渲染，也不用依赖next-auth：

• Next.js API路由代理：在Next.js项目里新建app/api/auth/[...path]/route.ts，作为代理转发请求到你的Express后端，解决跨域问题同时处理cookie传递：

  import { NextResponse } from 'next/server';
  
  export async function GET(request: Request) {
    const { pathname } = new URL(request.url);
    const backendUrl = `https://your-express-backend${pathname.replace('/api/auth', '/auth')}`;
    const res = await fetch(backendUrl, {
      headers: {
        Cookie: request.headers.get('Cookie') || ''
      }
    });
    const response = NextResponse.json(await res.json());
    response.headers.set('Set-Cookie', res.headers.get('Set-Cookie') || '');
    return response;
  }
  

• Middleware中间件：在middleware.ts里拦截所有需要认证的路由，服务端检查cookie中的JWT有效性，无效则跳转到登录页，有效则将用户信息传递给页面组件。
• 服务器组件认证：App Router的服务器组件可以直接在服务端请求你的Express后端，因为服务器组件运行在服务端，没有跨域限制，能直接读取并传递cookie，获取用户信息后再渲染页面。

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