使用React.useEffect监听Supabase Auth状态，页面刷新丢失会话

问题出在页面刷新时，onAuthStateChange 不会主动触发初始会话的加载——Supabase需要从本地存储恢复会话，但这个过程不会自动触发状态变更事件，只有当后续有认证操作或页面焦点变化时才会触发。要解决这个问题，需要在组件挂载时主动获取当前会话，再配合状态监听。

修改后的代码如下：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./componenets/Home";
import NoPage from "./componenets/NoPage";
import Layout from "./componenets/Layout";
import Contact from "./componenets/Contact";
import Login from "./componenets/Login";
import PrivateRoutes from "./utils/PrivateRoutes";
import Products from "./pages/Products";
import { supabase } from "./libs/supabase";
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";

import React from "react";
import Landing from "./componenets/Landing";

function App() {
  const [session, setSession] = React.useState();

  React.useEffect(() => {
    // 页面加载时主动获取当前会话
    const getInitialSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setSession(session);
    };

    getInitialSession();

    // 监听认证状态变化
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, _session) => {
        console.log(`Supbase auth event: ${event}`);
        setSession(_session);
      }
    );

    return () => {
      authListener.subscription.unsubscribe();
    };
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="login" element={<Login />} />
        <Route
          path="log2"
          element={
            <Auth
              supabaseClient={supabase}
              appearance={{ theme: ThemeSupa }}
              providers={["google", "facebook", "twitter"]}
            />
          }
        />

        <Route element={<PrivateRoutes />}>
          <Route path="dashboard" element={<Home />} />
          <Route element={<Products />} path="/products" />
        </Route>
        <Route path="/" element={<Layout session={session} />}>
          <Route index element={<Landing />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

关键修改点： #

• 添加getInitialSession异步函数，调用supabase.auth.getSession()主动获取本地存储中的会话，页面刷新后直接将会话设置到state中。
• 保持原有的onAuthStateChange监听，处理后续登录、登出、会话过期等状态变更场景。

这样页面刷新时，组件会先拿到已保存的会话，避免session初始为null的问题，同时后续的状态变化也能被正常监听。

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