TanStack Router结合Supabase Auth上下文路由重定向失效问题

核心问题 #

TanStack Router 的 beforeLoad 钩子仅在路由初始加载阶段执行一次，而你的Supabase会话是异步获取并更新到Auth上下文的，初始值为null。等会话状态更新时，beforeLoad 已经执行完毕，导致重定向逻辑无法感知最新状态。

解决步骤 #

1. 移除路由的 beforeLoad 逻辑 #

删掉路由配置中依赖Auth上下文的beforeLoad，因为它无法处理异步更新的状态。

2. 在首页组件内监听Auth状态实现重定向 #

在首页（Index.tsx）中使用useEffect监听会话状态变化，结合useNavigate完成条件重定向：

import { useEffect } from 'react';
import { useAuth } from '../hooks/useAuth';
import { useNavigate } from '@tanstack/react-router';

export default function Index() {
  const { session } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    // 会话存在时跳转至signup-success页面
    if (session) {
      navigate({ to: '/signup-success' });
    }
  }, [session, navigate]);

  return (
    <div>
      <h1>首页</h1>
      {/* 首页内容 */}
    </div>
  );
}

3. 确保Auth上下文正确监听会话状态 #

检查useAuth钩子，确保它能异步获取初始会话并监听Supabase的Auth状态变化，实时更新上下文：

import { useContext, useEffect, useState } from 'react';
import { AuthContext } from '../contexts/auth';
import { supabase } from '../lib/supabase';

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error('useAuth必须在AuthProvider内部使用');

  const { session, setSession } = context;

  useEffect(() => {
    // 初始化获取当前会话
    const fetchInitialSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setSession(session);
    };

    // 监听Auth状态变化，实时更新会话
    const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    fetchInitialSession();

    return () => listener?.unsubscribe();
  }, [setSession]);

  return { session };
}

原理说明 #

组件内的useEffect会在session状态更新时重新执行，此时能拿到最新的Supabase会话状态，从而触发正确的重定向逻辑。相比之下，beforeLoad的执行时机过早，无法等待异步Auth状态的更新。

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