{"id":749,"date":"2026-02-16T22:00:32","date_gmt":"2026-02-16T14:00:32","guid":{"rendered":"https:\/\/blog.itsmygo.uk\/2026\/02\/16\/supabase-getsession-%e5%9c%a8-onauthstatechange-%e5%9b%9e%e8%aa%bf%e5%85%a7%e9%80%a0%e6%88%90%e6%ad%bb%e9%8e%96-%e6%8e%92%e6%9f%a5%e8%88%87%e4%bf%ae%e5%be%a9%e5%85%a8%e8%a8%98%e9%8c%84\/"},"modified":"2026-02-16T22:00:32","modified_gmt":"2026-02-16T14:00:32","slug":"supabase-getsession-%e5%9c%a8-onauthstatechange-%e5%9b%9e%e8%aa%bf%e5%85%a7%e9%80%a0%e6%88%90%e6%ad%bb%e9%8e%96-%e6%8e%92%e6%9f%a5%e8%88%87%e4%bf%ae%e5%be%a9%e5%85%a8%e8%a8%98%e9%8c%84","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.uk\/wordpress\/2026\/02\/16\/supabase-getsession-%e5%9c%a8-onauthstatechange-%e5%9b%9e%e8%aa%bf%e5%85%a7%e9%80%a0%e6%88%90%e6%ad%bb%e9%8e%96-%e6%8e%92%e6%9f%a5%e8%88%87%e4%bf%ae%e5%be%a9%e5%85%a8%e8%a8%98%e9%8c%84\/","title":{"rendered":"Supabase getSession() \u5728 onAuthStateChange \u56de\u8abf\u5167\u9020\u6210\u6b7b\u9396 \u2014 \u6392\u67e5\u8207\u4fee\u5fa9\u5168\u8a18\u9304"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u75c7\u72c0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React + FastAPI + Supabase \u7684 SPA \u5c08\u6848\u90e8\u7f72\u5f8c\uff0c\u51fa\u73fe\u4e00\u500b\u8a6d\u7570\u7684\u554f\u984c\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>\u767b\u5165\u5f8c\u9032\u5165 Dashboard\uff0c<strong>\u9ede\u300c\u57f7\u884c\u300d\u6309\u9215\u6703\u5361\u4f4f<\/strong>\uff08\u6c38\u9060\u986f\u793a\u300c\u63d0\u4ea4\u4e2d&#8230;\u300d\uff09<\/li>\n\n\n<li><strong>\u6309 F5 \u91cd\u65b0\u6574\u7406\u5f8c\uff0c\u99ac\u4e0a\u518d\u9ede\u5c31\u6b63\u5e38<\/strong><\/li>\n\n\n<li>\u904e\u4e00\u6bb5\u6642\u9593\u4e0d\u64cd\u4f5c\uff0c\u518d\u9ede\u53c8\u5361\u4f4f<\/li>\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u500b\u554f\u984c\u5728\u958b\u767c\u6a21\u5f0f\uff08Vite dev server + proxy\uff09\u5b8c\u5168\u4e0d\u6703\u51fa\u73fe\uff0c\u53ea\u6709 production \u90e8\u7f72\u624d\u6703\u89f8\u767c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u932f\u8aa4\u6392\u67e5\u904e\u7a0b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e00\u6b65\uff1a\u61f7\u7591\u975c\u614b\u6a94\u6848 Cache\uff08\u932f\u8aa4\u65b9\u5411\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u958b\u59cb\u4ee5\u70ba\u662f FastAPI \u7684 catch-all \u8def\u7531\u6c92\u8a2d <code>Cache-Control<\/code>\uff0c\u5c0e\u81f4\u700f\u89bd\u5668\u5feb\u53d6\u4e86\u820a\u7684 <code>index.html<\/code>\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\"># backend\/main.py \u2014 SPA catch-all<\/span>\n@app.get(<span class=\"hljs-string\">\"\/{full_path:path}\"<\/span>)\nasync def serve_frontend(full_path: str):\n    file_path = FRONTEND_DIST \/ full_path\n    <span class=\"hljs-keyword\">if<\/span> file_path.exists() <span class=\"hljs-keyword\">and<\/span> file_path.is_file():\n        <span class=\"hljs-keyword\">return<\/span> FileResponse(file_path)\n    <span class=\"hljs-keyword\">return<\/span> FileResponse(\n        FRONTEND_DIST \/ <span class=\"hljs-string\">\"index.html\"<\/span>,\n        headers={<span class=\"hljs-string\">\"Cache-Control\"<\/span>: <span class=\"hljs-string\">\"no-cache, no-store, must-revalidate\"<\/span>},\n    )\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">\u52a0\u4e86 <code>Cache-Control<\/code> \u5f8c\u554f\u984c\u4f9d\u820a\u3002<strong>\u9019\u500b\u6539\u52d5\u672c\u8eab\u662f\u597d\u7fd2\u6163\uff0c\u4f46\u4e0d\u662f\u6839\u56e0\u3002<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e8c\u6b65\uff1a\u61f7\u7591 OAuth Callback \u7af6\u614b\uff08\u90e8\u5206\u6b63\u78ba\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u767c\u73fe <code>initialize()<\/code> \u7528 <code>getSession()<\/code> \u53d6 session\uff0c\u4f46 OAuth callback \u7684 hash fragment \u9084\u6c92\u88ab Supabase \u89e3\u6790\uff0c\u5c0e\u81f4 <code>session = null<\/code> \u2192 \u76f4\u63a5\u8df3\u8f49 <code>\/login<\/code>\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4fee\u4e86 CallbackPage \u52a0\u5165 <code>authReady<\/code> \u72c0\u614b\u7b49\u5f85 <code>SIGNED_IN<\/code> \u4e8b\u4ef6\uff0c<strong>\u767b\u5165\u6d41\u7a0b\u78ba\u5be6\u4fee\u597d\u4e86<\/strong>\uff0c\u4f46\u300c\u57f7\u884c\u5361\u4f4f\u300d\u7684\u554f\u984c\u4ecd\u7136\u5b58\u5728\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c\u4e09\u6b65\uff1a\u627e\u5230\u771f\u6b63\u539f\u56e0 \u2014 getSession() \u6b7b\u9396<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u95dc\u9375\u7dda\u7d22\uff1a<strong>F5 \u5f8c\u99ac\u4e0a\u64cd\u4f5c\u5c31\u6b63\u5e38\uff0c\u7b49\u4e00\u6bb5\u6642\u9593\u53c8\u5361\u4f4f<\/strong>\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u4ee3\u8868\u554f\u984c\u8207\u6642\u9593\u6709\u95dc\u3002Supabase JWT token \u9810\u8a2d 1 \u5c0f\u6642\u904e\u671f\uff0c\u5230\u671f\u5f8c Supabase \u81ea\u52d5\u89f8\u767c <code>TOKEN_REFRESHED<\/code> \u4e8b\u4ef6\u3002\u800c\u6211\u5011\u7684 <code>onAuthStateChange<\/code> \u56de\u8abf\u88e1\u547c\u53eb\u4e86 <code>checkUserStatus()<\/code>\uff0c\u5f62\u6210\u4e86\u4e00\u689d\u6b7b\u9396\u93c8\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">onAuthStateChange<\/span> \u56de\u8abf\u57f7\u884c\uff08\u6301\u6709\u5167\u90e8\u9396\uff09\n  \u2192 <span class=\"hljs-selector-tag\">checkUserStatus<\/span>()\n    \u2192 <span class=\"hljs-selector-tag\">fetchWithAuth<\/span>()\n      \u2192 <span class=\"hljs-selector-tag\">getAccessToken<\/span>()\n        \u2192 <span class=\"hljs-selector-tag\">supabase<\/span><span class=\"hljs-selector-class\">.auth<\/span><span class=\"hljs-selector-class\">.getSession<\/span>()  \u2190 \u9700\u8981\u540c\u4e00\u628a\u9396\uff0c\u6b7b\u9396\uff01\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Supabase JS v2\uff08v2.39+ \u8d77\uff09\u7684 <code>getSession()<\/code> \u4f7f\u7528\u5167\u90e8\u9396\u6a5f\u5236\u3002<\/strong> \u5728 <code>onAuthStateChange<\/code> \u56de\u8abf\u5167\u547c\u53eb <code>getSession()<\/code> \u6703\u5617\u8a66\u53d6\u5f97\u5df2\u88ab\u56de\u8abf\u6301\u6709\u7684\u9396\uff0c\u9020\u6210\u6c38\u4e45\u7b49\u5f85\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65e6\u6b7b\u9396\u767c\u751f\uff0c<strong>\u6240\u6709\u5f8c\u7e8c\u7684 <code>getSession()<\/code> \u547c\u53eb\u90fd\u6703\u88ab\u963b\u585e<\/strong>\uff0c\u5c0e\u81f4\u4efb\u4f55\u9700\u8981\u8a8d\u8b49\u7684 API \u547c\u53eb\u90fd\u5361\u4f4f\u3002F5 \u91cd\u65b0\u8f09\u5165\u9801\u9762\u5f8c\uff0c\u9396\u88ab\u91cb\u653e\uff0c\u4e00\u5207\u6062\u5fa9\u6b63\u5e38 \u2014 \u76f4\u5230\u4e0b\u6b21 token \u904e\u671f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u89e3\u6c7a\u65b9\u6848<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6838\u5fc3\u601d\u8def\uff1a<strong>\u6c38\u9060\u4e0d\u5728 <code>onAuthStateChange<\/code> \u56de\u8abf\u5167\u547c\u53eb <code>getSession()<\/code><\/strong>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. \u7528 module-level \u8b8a\u6578\u5feb\u53d6 token<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ lib\/supabase.ts<\/span>\n<span class=\"hljs-keyword\">let<\/span> _cachedAccessToken: string | <span class=\"hljs-literal\">null<\/span> = <span class=\"hljs-literal\">null<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setAccessToken<\/span>(<span class=\"hljs-params\">token: string | null<\/span>) <\/span>{\n  _cachedAccessToken = token\n}\n\n<span class=\"hljs-comment\">\/\/ \u540c\u6b65\u8b80\u53d6\uff0c\u4e0d\u547c\u53eb getSession()<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getAccessToken<\/span>(<span class=\"hljs-params\"><\/span>): <span class=\"hljs-title\">string<\/span> | <span class=\"hljs-title\">null<\/span> <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> _cachedAccessToken\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">refreshAccessToken<\/span>(<span class=\"hljs-params\"><\/span>): <span class=\"hljs-title\">Promise<\/span>&lt;<span class=\"hljs-title\">string<\/span> | <span class=\"hljs-title\">null<\/span>&gt; <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { <span class=\"hljs-attr\">data<\/span>: { session }, error } = <span class=\"hljs-keyword\">await<\/span> supabase.auth.refreshSession()\n  <span class=\"hljs-keyword\">if<\/span> (error) <span class=\"hljs-keyword\">throw<\/span> error\n  <span class=\"hljs-keyword\">const<\/span> token = session?.access_token ?? <span class=\"hljs-literal\">null<\/span>\n  _cachedAccessToken = token\n  <span class=\"hljs-keyword\">return<\/span> token\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">2. \u5728 onAuthStateChange \u4e2d\u540c\u6b65\u66f4\u65b0\u5feb\u53d6<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ stores\/authStore.ts<\/span>\nsupabase.auth.onAuthStateChange(<span class=\"hljs-keyword\">async<\/span> (event, session) =&gt; {\n  <span class=\"hljs-comment\">\/\/ \u540c\u6b65\u66f4\u65b0\u5feb\u53d6 token \u2014 \u4e0d\u547c\u53eb getSession()<\/span>\n  setAccessToken(session?.access_token ?? <span class=\"hljs-literal\">null<\/span>)\n  <span class=\"hljs-keyword\">set<\/span>({ session, <span class=\"hljs-attr\">user<\/span>: session?.user ?? <span class=\"hljs-literal\">null<\/span> })\n\n  <span class=\"hljs-comment\">\/\/ \u53ea\u5728 INITIAL_SESSION \u548c SIGNED_IN \u6642\u6aa2\u67e5\u7528\u6236\u72c0\u614b<\/span>\n  <span class=\"hljs-comment\">\/\/ TOKEN_REFRESHED \u53ea\u9700\u66f4\u65b0 token\uff0c\u4e0d\u9700\u8981\u91cd\u65b0\u9a57\u8b49<\/span>\n  <span class=\"hljs-keyword\">if<\/span> (session &amp;&amp; (event === <span class=\"hljs-string\">'INITIAL_SESSION'<\/span> || event === <span class=\"hljs-string\">'SIGNED_IN'<\/span>)) {\n    <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">get<\/span>().checkUserStatus()\n  } else if (event === 'SIGNED_OUT') {\n    <span class=\"hljs-keyword\">set<\/span>({ userStatus: <span class=\"hljs-literal\">null<\/span> })\n  }\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">3. fetchWithAuth \u81ea\u52d5\u4f7f\u7528\u5feb\u53d6 token<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ lib\/api.ts \u2014 \u4e0d\u9700\u8981\u4fee\u6539<\/span>\n<span class=\"hljs-comment\">\/\/ getAccessToken() \u73fe\u5728\u662f\u540c\u6b65\u8b80\u53d6\u5feb\u53d6\uff0c\u4e0d\u518d\u547c\u53eb getSession()<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fetchWithAuth<\/span>(<span class=\"hljs-params\">endpoint: string, options: RequestInit = {}<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">let<\/span> token = getAccessToken()\n  <span class=\"hljs-keyword\">if<\/span> (!token) <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Not authenticated'<\/span>)\n\n  <span class=\"hljs-keyword\">let<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${API_URL}<\/span><span class=\"hljs-subst\">${endpoint}<\/span>`<\/span>, { ... })\n\n  <span class=\"hljs-keyword\">if<\/span> (response.status === <span class=\"hljs-number\">401<\/span>) {\n    <span class=\"hljs-comment\">\/\/ 401 \u6642\u624d\u547c\u53eb refreshAccessToken()\uff08\u9019\u4e0d\u5728 onAuthStateChange \u5167\uff0c\u5b89\u5168\uff09<\/span>\n    token = <span class=\"hljs-keyword\">await<\/span> refreshAccessToken()\n    response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${API_URL}<\/span><span class=\"hljs-subst\">${endpoint}<\/span>`<\/span>, { ... })\n  }\n\n  <span class=\"hljs-keyword\">return<\/span> response.json()\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">\u4e0b\u6b21\u9047\u5230\u985e\u4f3c\u554f\u984c\u600e\u9ebc\u67e5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u8fa8\u8b58\u7279\u5fb5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u4f60\u7684 SPA \u51fa\u73fe\u4ee5\u4e0b\u75c7\u72c0\uff0c\u5f88\u53ef\u80fd\u662f Supabase auth \u9396\u76f8\u95dc\u554f\u984c\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li><strong>F5 \u80fd\u4fee\u5fa9<\/strong> \u2014 \u4ee3\u8868\u4e0d\u662f\u5f8c\u7aef\u554f\u984c\uff0c\u662f\u524d\u7aef\u72c0\u614b\u5361\u4f4f<\/li>\n\n\n<li><strong>\u8207\u6642\u9593\u76f8\u95dc<\/strong> \u2014 \u525b\u8f09\u5165\u6b63\u5e38\uff0c\u904e\u4e00\u6bb5\u6642\u9593\u58de\u6389 \u2192 \u53ef\u80fd\u662f token refresh \u89f8\u767c\u7684<\/li>\n\n\n<li><strong>API \u547c\u53eb hang \u4f4f<\/strong> \u2014 \u4e0d\u662f\u5831\u932f\uff0c\u662f\u6c38\u9060\u6c92\u6709\u56de\u61c9 \u2192 \u53ef\u80fd\u662f Promise \u6c38\u9060\u6c92 resolve<\/li>\n\n\n<li><strong>\u53ea\u5728 production \u51fa\u73fe<\/strong> \u2014 dev \u6a21\u5f0f HMR \u6703\u983b\u7e41\u91cd\u8f09\uff0c\u4e0d\u5bb9\u6613\u89f8\u767c token \u904e\u671f<\/li>\n\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u9664\u932f\u6b65\u9a5f<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li><strong>\u6253\u958b DevTools Network tab<\/strong>\uff0c\u9ede\u57f7\u884c\u6642\u89c0\u5bdf\uff1a\u8acb\u6c42\u6709\u6c92\u6709\u767c\u51fa\u53bb\uff1f\u9084\u662f\u6839\u672c\u6c92\u767c\uff1f<\/li>\n\n\n<li><strong>\u52a0 <code>console.log<\/code> \u5728 <code>getAccessToken()<\/code> \u9032\u5165\u548c\u96e2\u958b<\/strong>\uff0c\u78ba\u8a8d\u662f\u4e0d\u662f\u5361\u5728\u9019\u88e1<\/li>\n\n\n<li><strong>\u6aa2\u67e5 <code>onAuthStateChange<\/code> \u56de\u8abf\u88e1\u6709\u6c92\u6709\u547c\u53eb\u4efb\u4f55 Supabase auth API<\/strong>\uff08<code>getSession<\/code>\u3001<code>getUser<\/code>\u3001<code>refreshSession<\/code>\uff09<\/li>\n\n\n<li>\u5982\u679c\u78ba\u8a8d\u662f\u9396\u554f\u984c\uff0c<strong>\u6539\u7528 module-level \u5feb\u53d6\u53d6\u4ee3 <code>getSession()<\/code><\/strong><\/li>\n\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u600e\u9ebc\u8ddf AI \u8aaa\u660e\u9019\u500b\u554f\u984c<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u4f60\u4e0b\u6b21\u9047\u5230\u985e\u4f3c\u554f\u984c\uff0c\u60f3\u8acb AI \u5e6b\u5fd9\u6392\u67e5\uff0c\u53ef\u4ee5\u9019\u6a23\u63cf\u8ff0\uff1a<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**\u597d\u7684\u63cf\u8ff0**\uff08AI \u80fd\u5feb\u901f\u5b9a\u4f4d\u554f\u984c\uff09\uff1a<br><br>\u300c\u6211\u7684 React + Supabase \u5c08\u6848\u90e8\u7f72\u5f8c\uff0cAPI \u547c\u53eb\u6703\u5361\u4f4f\uff08\u4e0d\u662f\u5831\u932f\uff0c\u662f hang\uff09\uff0cF5 \u91cd\u65b0\u6574\u7406\u5f8c\u99ac\u4e0a\u6062\u5fa9\u6b63\u5e38\uff0c\u4f46\u904e\u4e00\u6bb5\u6642\u9593\u53c8\u6703\u5361\u3002\u958b\u767c\u6a21\u5f0f\u4e0d\u6703\u51fa\u73fe\u3002\u6211\u7684 <code>onAuthStateChange<\/code> \u56de\u8abf\u88e1\u6709\u547c\u53eb\u9700\u8981\u8a8d\u8b49\u7684 API\u3002\u300d<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u6bb5\u63cf\u8ff0\u5305\u542b\u4e86\u4e09\u500b\u95dc\u9375\u8cc7\u8a0a\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><strong>\u75c7\u72c0<\/strong>\uff1aAPI hang + F5 \u4fee\u5fa9 + \u9031\u671f\u6027<\/li>\n\n\n<li><strong>\u74b0\u5883<\/strong>\uff1aproduction only<\/li>\n\n\n<li><strong>\u53ef\u7591\u64cd\u4f5c<\/strong>\uff1a<code>onAuthStateChange<\/code> \u5167\u547c\u53eb\u8a8d\u8b49 API<\/li>\n\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">**\u4e0d\u597d\u7684\u63cf\u8ff0**\uff08AI \u53ef\u80fd\u8d70\u5f88\u591a\u5f4e\u8def\uff09\uff1a<br><br>\u300c\u90e8\u7f72\u5f8c\u4e0d\u80fd\u7528\uff0c\u8981 F5 \u624d\u884c\u300d<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u592a\u6a21\u7cca\u4e86\uff0cAI \u6703\u5f9e Cache-Control\u3001CORS\u3001\u8def\u7531\u914d\u7f6e\u7b49\u65b9\u5411\u731c\u6e2c\uff0c\u800c\u4e0d\u662f\u76f4\u63a5\u770b auth \u9396\u554f\u984c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u63d0\u4f9b\u7d66 AI \u7684\u95dc\u9375\u6a94\u6848<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li><code>authStore.ts<\/code>\uff08\u6216\u4f60\u521d\u59cb\u5316 Supabase auth \u7684\u5730\u65b9\uff09<\/li>\n\n\n<li><code>api.ts<\/code>\uff08\u6216\u4f60\u505a\u8a8d\u8b49 API \u547c\u53eb\u7684\u5730\u65b9\uff09<\/li>\n\n\n<li><code>supabase.ts<\/code>\uff08\u4f60\u7684 Supabase client \u8a2d\u5b9a\uff09<\/li>\n\n\n<li><code>package.json<\/code> \u4e2d <code>@supabase\/supabase-js<\/code> \u7684\u7248\u672c<\/li>\n\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7e3d\u7d50<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u554f\u984c<\/th>\n<th>\u539f\u56e0<\/th>\n<th>\u4fee\u6cd5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u57f7\u884c\u529f\u80fd\u5361\u4f4f\u3001F5 \u6062\u5fa9<\/td>\n<td><code>onAuthStateChange<\/code> \u56de\u8abf\u5167\u547c\u53eb <code>getSession()<\/code> \u9020\u6210\u6b7b\u9396<\/td>\n<td>\u6539\u7528 module-level \u5feb\u53d6 token<\/td>\n<\/tr>\n<tr>\n<td>OAuth callback \u5f8c\u5361\u5728\u9a57\u8b49\u4e2d<\/td>\n<td><code>getSession()<\/code> \u5728 hash fragment \u89e3\u6790\u524d\u56de\u50b3 null<\/td>\n<td>CallbackPage \u7b49\u5f85 <code>SIGNED_IN<\/code> \u4e8b\u4ef6<\/td>\n<\/tr>\n<tr>\n<td>index.html \u53ef\u80fd\u88ab\u700f\u89bd\u5668\u5feb\u53d6<\/td>\n<td><code>FileResponse<\/code> \u9810\u8a2d\u7121 Cache-Control<\/td>\n<td>\u52a0 <code>no-cache, no-store, must-revalidate<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6838\u5fc3\u539f\u5247\uff1a\u5728 Supabase \u7684 <code>onAuthStateChange<\/code> \u56de\u8abf\u88e1\uff0c\u6c38\u9060\u4e0d\u8981\u547c\u53eb <code>getSession()<\/code>\u3001<code>getUser()<\/code> \u7b49\u9700\u8981\u5167\u90e8\u9396\u7684\u65b9\u6cd5\u3002\u76f4\u63a5\u4f7f\u7528\u56de\u8abf\u53c3\u6578\u4e2d\u7684 <code>session<\/code> \u7269\u4ef6\u3002<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u90e8\u7f72 SPA \u5f8c\u57f7\u884c\u529f\u80fd\u5361\u4f4f\u3001F5 \u624d\u80fd\u6062\u5fa9\uff1f\u554f\u984c\u6839\u6e90\u662f Supabase JS v2 \u7684 getSession() \u9396\u6a5f\u5236\uff0c\u5728 onAuthStateChange \u56de\u8abf\u5167\u547c\u53eb\u6703\u9020\u6210\u6b7b\u9396\u3002\u672c\u6587\u8a18\u9304\u5b8c\u6574\u6392\u67e5\u904e\u7a0b\u8207\u4fee\u5fa9\u65b9\u6848\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rolpb_likes":0,"footnotes":""},"categories":[682],"tags":[686,291,683,307,684,269,301,685,687],"class_list":["post-749","post","type-post","status-publish","format-standard","hentry","category-682","tag-deadlock","tag-fastapi","tag-getsession","tag-oauth","tag-onauthstatechange","tag-react","tag-supabase","tag-685","tag-687"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":0,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/749\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}