19:[["$","p",null,{"children":"本章我们要开始考虑实际业务需求，设计用户信息缓存方案和数据表，完善用户功能。本章包含的功能有："}],"\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":"设计用户表和数据入库"}],"\n",["$","li",null,{"className":"mb-2","children":"设计 token 缓存，为后面的业务做准备"}],"\n",["$","li",null,{"className":"mb-2","children":"token 自动刷新，避免一小时登录一次"}],"\n",["$","li",null,{"className":"mb-2","children":"测试 credits 变更是否正确"}],"\n",["$","li",null,{"className":"mb-2","children":"添加手动刷新用户数据功能"}],"\n",["$","li",null,{"className":"mb-2","children":"添加每次打开 sidepanel 就刷新用户数据的功能"}],"\n"]}],"\n",["$","blockquote",null,{"className":"p-3 text-sm","children":["\n",["$","p",null,{"children":"本章学习如果遇到问题，请加微信「bigye_chengpu」反馈交流，添加好友请备注「全栈教程」"}],"\n"]}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"认识-firestore","children":["$","a",null,{"className":"anchor-link","href":"#认识-firestore","children":["认识 Firestore",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"我们使用的是 Firebase 的 Firestore，它在控制台的这个地方："}],"\n",["$","p",null,{"children":["$","img",null,{"className":"rounded border-4 border-main","src":"/assets/05/01.webp","alt":"01.png"}]}],"\n",["$","p",null,{"children":"Firebase 的 Firebase 是一个灵活、可扩展的 NoSQL 云数据库，用于存储和同步客户端和服务器端的数据。它具有以下特点："}],"\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":"实时数据同步"}],"\n",["$","li",null,{"className":"mb-2","children":"离线支持"}],"\n",["$","li",null,{"className":"mb-2","children":"强大的查询功能"}],"\n",["$","li",null,{"className":"mb-2","children":"安全规则"}],"\n",["$","li",null,{"className":"mb-2","children":"多平台 SDK"}],"\n"]}],"\n",["$","p",null,{"children":"Firestore 使用集合和文档的概念来组织数据，可以分别理解为数据表和数据行。本章及后面的章节，如果说到数据表和数据行，都表示是 Firestore 的集合和文档。"}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"firestore-基本操作方法","children":["$","a",null,{"className":"anchor-link","href":"#firestore-基本操作方法","children":["Firestore 基本操作方法",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"如果你开发过 Node 服务，并且使用过任何一种 orm，你对 Firestore 操作方法绝不会陌生。但是如果你之前没有 orm 的使用经验，那么你学会 Firestore 的操作方法后，以后接触 orm 也会很容易上手。"}],"\n",["$","p",null,{"children":"以下是 Firestore 一些常用的方法："}],"\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":["引用方法：","\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"doc()"}],"：创建对特定文档的引用"]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"collection()"}],"：创建对集合的引用"]}],"\n"]}],"\n"]}],"\n",["$","li",null,{"className":"mb-2","children":["读取操作","\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"getDoc()"}],"：获取单个文档"]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"getDocs()"}],"：获取多个文档"]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"onSnapshot()"}],"：监听实时更新"]}],"\n"]}],"\n"]}],"\n",["$","li",null,{"className":"mb-2","children":["写入操作","\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"setDoc()"}],"：创建或覆盖文档"]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"addDoc()"}],"：添加新文档（自动生成 ID）"]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"updateDoc()"}],"：更新文档中的字段"]}],"\n"]}],"\n"]}],"\n",["$","li",null,{"className":"mb-2","children":["删除操作","\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"deleteDoc()"}],"：删除文档"]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$","p",null,{"children":"有这些知识就可以开始我们本章的功能开发了。"}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"设计用户表和数据入库","children":["$","a",null,{"className":"anchor-link","href":"#设计用户表和数据入库","children":["设计用户表和数据入库",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"在一个新功能开发前，需要思考清楚需求并设计好数据表，这样会让我们后面的开发思路更清晰，达到事半功倍的效果。"}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"设计用户表","children":["$","a",null,{"className":"anchor-link","href":"#设计用户表","children":["设计用户表",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"通过上一章的登录功能，我们可以拿到 Google 授权返回的用户信息："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"interface User {\n accessToken: string;\n auth: Auth\n displayName: string | null; // 用户名\n email: string | null; // 用户邮箱\n emailVerified: boolean;\n isAnonymous: boolean;\n metadata: {\n createdAt: string;\n creationTime: string;\n lastLoginAt: string;\n lastSignInTime: string;\n };\n phoneNumber: string | null;\n photoURL: string | null; // 用户头像\n proactiveRefresh: ProactiveRefresh;\n providerData: Array;\n providerId: string;\n reloadListener: null | (() => void);\n reloadUserInfo: never;\n stsTokenManager: {\n accessToken: string; // token\n expirationTime: number;\n refreshToken: string; // 刷新token\n isExpired: boolean;\n };\n tenantId: string | null;\n uid: string; // 用户 id\n refreshToken: string;\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"interface"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" accessToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" auth"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Auth"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户名"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户邮箱"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" emailVerified"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" boolean"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" isAnonymous"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" boolean"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" metadata"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" createdAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" creationTime"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastSignInTime"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" phoneNumber"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户头像"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" proactiveRefresh"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" ProactiveRefresh"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" providerData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Array"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"UserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" providerId"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" reloadListener"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" =>"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" void"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" reloadUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" never"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" stsTokenManager"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" accessToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" expirationTime"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" number"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" refreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 刷新token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" isExpired"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" boolean"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" tenantId"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户 id"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" refreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"我们的页面需要展示用户基本信息、需要记录 token 以实现更多业务需求，所以筛选出这些会用到的字段："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"{\n uid: string; // 用户 id\n email: string; // 用户邮箱\n displayName: string; // 用户名\n photoURL: string; // 用户头像\n lastLoginAt: timestamp; // 最后登录时间\n stsTokenManager: {\n refreshToken: string; // 刷新 token\n accessToken: string; // token\n };\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户 id"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户邮箱"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户名"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户头像"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt: timestamp; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 最后登录时间"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" stsTokenManager: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" refreshToken: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 刷新 token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" accessToken: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" token"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"再结合我们的业务需求——我们以后会给插件设置付费功能，包括一次性付款购买使用次数、订阅月会员。"}],"\n",["$","p",null,{"children":"如果在一个复杂的产品里，通常会给付费功能设计单独的表，但是我们做的是功能单一的产品，设计太多表性价比不高，所以考虑把付费功能的字段也放在用户表里。"}],"\n",["$","p",null,{"children":["我们给这两个功能点设计字段，使用次数为 ",["$","code",null,{"children":"credits"}],"，是一个数值，月会员为 ",["$","code",null,{"children":"subscription"}],"，是一个对象，这个对象默认为 ",["$","code",null,{"children":"null"}],"，等到介绍订阅功能开发的时候，我们再来设计这个对象里的字段。"]}],"\n",["$","p",null,{"children":"有了以上信息，我们就设计出这样用户表："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"{\n uid: string; // 用户 id\n email: string; // 用户邮箱\n displayName: string; // 用户名\n photoURL: string; // 用户头像\n lastLoginAt: timestamp; // 最后登录时间\n credits: number; // 剩余使用次数\n subscription?: any; // 订阅信息，等开发支付功能再设计其中的字段\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户 id"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户邮箱"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户名"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL: string; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 用户头像"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt: timestamp; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 最后登录时间"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" credits: number; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 剩余使用次数"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" subscription"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?:"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" any; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 订阅信息，等开发支付功能再设计其中的字段"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":["同时这也可以作为我们插件端的用户ts类型，在 ",["$","code",null,{"children":"src/types/user.ts"}]," 里定义用户类型："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"interface BaseUserData {\n uid: string;\n email: string;\n displayName: string;\n photoURL: string;\n lastLoginAt: timestamp;\n credits: number;\n subscription?: any;\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"interface"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" BaseUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" timestamp"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" credits"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" number"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" subscription"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?:"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" any"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"数据入库","children":["$","a",null,{"className":"anchor-link","href":"#数据入库","children":["数据入库",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"使用 Firestore 我们不需要手动去建数据表，Firestore 会在写入数据的时候检查是否存在当前表，如果不存在，则会自动创建。"}],"\n",["$","p",null,{"children":"也就是说，我们现在只需要完成用户数据入库的逻辑，等有用户登录后就可以在 Firestore 里看到用户表和数据了。"}],"\n",["$","p",null,{"children":["首先，我们需要在 ",["$","code",null,{"children":"firebaseAuth.ts"}]," 里定义 Firestore 实例 ",["$","code",null,{"children":"db"}],"："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// src/background/firebaseAuth.ts\n \nimport { doc, getDoc, getFirestore, setDoc } from \"firebase/firestore\"\nimport { prefixByEnv } from \"~lib/prefixByEnv\"\n \n// Firebase配置\nconst firebaseConfig = {\n // …… 这里是配置信息\n}\n// 初始化 Firebase\nlet app;\nlet auth;\nlet db; // 新增：定义 Firestore 实例\n \ntry {\n app = initializeApp(firebaseConfig);\n auth = getAuth(app);\n db = getFirestore(app); // 新增：定义 Firestore 实例\n} catch (error) {\n console.error(\"Error initializing Firebase:\", error);\n}\n \nexport { app, auth, db }\n \n// 其他代码不变"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/background/firebaseAuth.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { doc, getDoc, getFirestore, setDoc } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/firestore\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { prefixByEnv } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~lib/prefixByEnv\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" Firebase配置"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" firebaseConfig"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" …… 这里是配置信息"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 初始化 Firebase"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"let"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" app;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"let"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" auth;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"let"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" db; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：定义 Firestore 实例"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" app "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" initializeApp"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(firebaseConfig);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" auth "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getAuth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(app);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" db "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getFirestore"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(app); "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：定义 Firestore 实例"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"} "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error initializing Firebase:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { app, auth, db }"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 其他代码不变"}]]}]]}]}]]}]}],"\n",["$","p",null,{"children":"接下来，通过 db 来写一个用户入库的方法："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// src/background/firebaseAuth.ts\n \nexport async function updateFirestoreUser(user: User) {\n if (!user) {\n return null\n }\n \n const userRef = doc(db, prefixByEnv('users'), user.uid)\n const userSnap = await getDoc(userRef)\n const existingData = userSnap.data() as Partial | undefined\n \n const updatedUser = user && {\n uid: user.uid,\n displayName: user.displayName,\n email: user.email,\n photoURL: user.photoURL,\n lastLoginAt: new Date(user.metadata.lastSignInTime).toISOString(),\n credits: existingData ? existingData.credits : 100,\n subscription: existingData?.subscription || null,\n }\n \n await setDoc(userRef, updatedUser, { merge: true })\n return updatedUser\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/background/firebaseAuth.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" updateFirestoreUser"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userRef"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" doc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(db, "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"prefixByEnv"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"users"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"), "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getDoc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(userRef)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"data"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"as"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Partial"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"StoreUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" undefined"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" updatedUser"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".displayName,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".email,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".photoURL,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Date"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"metadata"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastSignInTime)."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"toISOString"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" credits"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" existingData "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".credits "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 100"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" subscription"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?.subscription "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setDoc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(userRef, updatedUser, { merge"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" updatedUser"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","ul",null,{"className":"list-disc pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":["通过 ",["$","code",null,{"children":"doc"}]," 创建文档引用。",["$","code",null,{"children":"prefixByEnv"}]," 是前面章节写的一个添加环境前缀的工具类，在开发环境 ",["$","code",null,{"children":"prefixByEnv('users')"}]," 会生成 ",["$","code",null,{"children":"dev_users"}]," 数据表，生产环境会生成 ",["$","code",null,{"children":"users"}]," 数据表，这样就可以把不同环境的用户隔离开了。"]}],"\n",["$","li",null,{"className":"mb-2","children":["通过 ",["$","code",null,{"children":"getDoc"}]," 获取当前文档快照"]}],"\n",["$","li",null,{"className":"mb-2","children":["使用 ",["$","code",null,{"children":"userSnap.data()"}]," 方法提取文档快照里的用户信息，如果是新用户，这里会获取到一个 ",["$","code",null,{"children":"undefined"}]]}],"\n",["$","li",null,{"className":"mb-2","children":[["$","code",null,{"children":"updatedUser"}]," 是根据我们上面的设计拼接的一个准备入库的数据行。由于",["$","code",null,{"children":"user.metadata.lastLoginAt"}]," 是私有字段，无法直接读取，所以只能用 ",["$","code",null,{"children":"lastSignInTime"}],"来替代 ",["$","code",null,{"children":"lastLoginAt"}],"。"]}],"\n",["$","li",null,{"className":"mb-2","children":["最后使用 ",["$","code",null,{"children":"setDoc"}]," 更新文档，如果数据行不存在，setDoc 方法会新增一条数据，如果已存在，则会更新用户信息。",["$","code",null,{"children":"{ merge: true }"}]," 选项确保只更新 ",["$","code",null,{"children":"updatedUser"}]," 里的字段，如果数据行内有其他字段不会丢失。"]}],"\n"]}],"\n",["$","p",null,{"children":["这里我们已经把 ",["$","code",null,{"children":"credits"}]," 和 ",["$","code",null,{"children":"subscription"}]," 引入用户信息了。",["$","code",null,{"children":"credits"}]," 初始值为 ",["$","code",null,{"children":"100"}],"，表示赠送新用户 100 credits，",["$","code",null,{"children":"subscription"}]," 初始值为 ",["$","code",null,{"children":"null"}],"，表示新用户没有订阅月会员。"]}],"\n",["$","p",null,{"children":["现在我们只需要在每次触发登录的时候调用这个方法就可以了，所以需要在 ",["$","code",null,{"children":"messageHandler.ts"}]," 的 ",["$","code",null,{"children":"LOGIN"}]," 事件里添加代码："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// src/background/messageHandler.ts\n// 在监听 LOGIN 事件中，登录成功后调用 updateFirestoreUser 方法\n \n\tif (request.name === \"LOGIN\") {\n authenticateWithFirebase()\n .then(async (res) => {\n sendResponse({\n success: true\n })\n updateFirestoreUser(res.user) // 新增，用户数据入库\n chrome.runtime.sendMessage({ type: \"AUTH_STATE_CHANGED\", user: await getCurrentUserInfo(res.user) })\n })\n .catch((error) => sendResponse({ success: false, error: error.message }))\n return true\n }"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/background/messageHandler.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 在监听 LOGIN 事件中，登录成功后调用 updateFirestoreUser 方法"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"\tif"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"request"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".name "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"==="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"LOGIN\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" authenticateWithFirebase"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"then"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (res) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendResponse"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" success"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" updateFirestoreUser"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"res"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".user) "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增，用户数据入库"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"sendMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ type"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"AUTH_STATE_CHANGED\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"res"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".user) })"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"((error) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendResponse"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ success"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".message }))"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"现在打开插件页面，重新登录一下，再打开 Firestore 页面，就能看到已经自动建数据表和新增数据行了。"}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"优化代码结构","children":["$","a",null,{"className":"anchor-link","href":"#优化代码结构","children":["优化代码结构",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"现在 firebaseAuth.ts 的逻辑逐渐复杂了，我们需要进行一次拆分以提升代码可读性和维护性。"}],"\n",["$","p",null,{"children":"分别创建以下文件夹和文件："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"src/\n└── background/\n └── firebase/\n ├── config.ts # 存放 Firebase 配置和初始化\n ├── authService.ts # 处理身份验证相关的功能\n ├── userService.ts # 处理用户信息相关的功能\n └── index.ts # 作为主文件，导入并导出其他文件的功能"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"md","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"md","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"src/"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"└── background/"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" └── firebase/"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ├── config.ts # 存放 Firebase 配置和初始化"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ├── authService.ts # 处理身份验证相关的功能"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ├── userService.ts # 处理用户信息相关的功能"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" └── index.ts # 作为主文件，导入并导出其他文件的功能"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"拆分后的代码如下："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// index.ts\n \nexport {\n authenticateWithFirebase, getCurrentUser, setupFirebaseAuth, signOut\n} from \"./authService\"\nexport { app, auth, db } from \"./config\"\nexport {\n getCurrentUserInfo,\n updateFirestoreUser\n} from \"./userService\""}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" index.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" authenticateWithFirebase, getCurrentUser, setupFirebaseAuth, signOut"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"} "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./authService\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { app, auth, db } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./config\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" getCurrentUserInfo,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" updateFirestoreUser"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"} "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./userService\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// config.ts\n \nimport { initializeApp } from \"firebase/app\";\nimport { getAuth } from \"firebase/auth/web-extension\";\nimport { getFirestore } from \"firebase/firestore\";\n \nconst firebaseConfig = {\n apiKey: process.env.PLASMO_PUBLIC_FIREBASE_PUBLIC_API_KEY,\n authDomain: process.env.PLASMO_PUBLIC_FIREBASE_AUTH_DOMAIN,\n projectId: process.env.PLASMO_PUBLIC_FIREBASE_PROJECT_ID,\n storageBucket: process.env.PLASMO_PUBLIC_FIREBASE_STORAGE_BUCKET,\n messagingSenderId: process.env.PLASMO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,\n appId: process.env.PLASMO_PUBLIC_FIREBASE_APP_ID,\n}\n \nlet app, auth, db;\n \ntry {\n app = initializeApp(firebaseConfig);\n auth = getAuth(app);\n db = getFirestore(app);\n} catch (error) {\n console.error(\"Error initializing Firebase:\", error);\n}\n \nexport { app, auth, db };"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" config.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { initializeApp } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/app\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { getAuth } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/auth/web-extension\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { getFirestore } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/firestore\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" firebaseConfig"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" apiKey"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_PUBLIC_API_KEY"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" authDomain"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_AUTH_DOMAIN"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" projectId"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_PROJECT_ID"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" storageBucket"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_STORAGE_BUCKET"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" messagingSenderId"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" appId"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_FIREBASE_APP_ID"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"let"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" app, auth, db;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" app "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" initializeApp"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(firebaseConfig);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" auth "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getAuth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(app);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" db "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getFirestore"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(app);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"} "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error initializing Firebase:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { app, auth, db };"}]]}]]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$1c"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" authService.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { User, UserCredential } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/auth\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" GoogleAuthProvider,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" onAuthStateChanged,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" signInWithCredential"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"} "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/auth/web-extension\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { auth } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./config\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { getCurrentUserInfo } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./userService\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"let"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" currentUser"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setupFirebaseAuth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 监听用户信息变化，更新状态"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onAuthStateChanged"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" currentUser "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 发送消息到 sidepanel"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"sendMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"AUTH_STATE_CHANGED\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" authenticateWithFirebase"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"UserCredential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"((resolve, reject) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"identity"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getAuthToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ interactive"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (token) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastError "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" !"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"token) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" reject"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastError)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" credential"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" GoogleAuthProvider"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"credential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", token)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" res"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" signInWithCredential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, credential)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" resolve"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(res)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" reject"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" signOut"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" auth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"signOut"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 移除缓存的auth token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"identity"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"clearAllCachedAuthTokens"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 获取当前用户(firebase 用户)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUser"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" currentUser "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$1d"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" userService.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { User } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/auth\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { doc, getDoc, setDoc } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"firebase/firestore\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { prefixByEnv } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~lib/prefixByEnv\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { StoreUserData } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~types/user\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { db } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./config\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 获取当前用户(插件端用户)，可以根据业务需求修改"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".displayName,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".email,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".photoURL,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 保存用户到 firestore"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" updateFirestoreUser"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userRef"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" doc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(db, "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"prefixByEnv"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"users"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"), "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getDoc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(userRef)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"data"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"as"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Partial"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"StoreUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" undefined"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" updatedUser"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".displayName,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".email,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".photoURL,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Date"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"metadata"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastSignInTime)."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"toISOString"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" credits"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" existingData "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".credits "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 0"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" :"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Number"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"process"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"env"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PLASMO_PUBLIC_NEW_USER_CREDITS"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 0"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" subscription"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?.subscription "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setDoc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(userRef, updatedUser, { merge"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" updatedUser"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error in updateFirestoreUser:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" throw"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" error; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 或者根据你的错误处理策略来处理"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":["修改 ",["$","code",null,{"children":"messageHandler.ts"}]," 和 ",["$","code",null,{"children":"background/index.ts"}],"，改成从 ",["$","code",null,{"children":"~background/firebase"}]," 导入 firebase 方法："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"import { authenticateWithFirebase, getCurrentUser, getCurrentUserInfo, signOut, updateFirestoreUser } from \"~background/firebase\";"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { authenticateWithFirebase, getCurrentUser, getCurrentUserInfo, signOut, updateFirestoreUser } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~background/firebase\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"import { setupFirebaseAuth } from \"~background/firebase\""}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { setupFirebaseAuth } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~background/firebase\""}]]}]}]}]]}]}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"token-本地缓存","children":["$","a",null,{"className":"anchor-link","href":"#token-本地缓存","children":["token 本地缓存",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"前面我们说到，从授权信息可以拿到 token，但是前面我们只用到用户信息。因为 token 有实效性，经常被动更新，不适合存入数据库，我们只考虑保存在本地。"}],"\n",["$","p",null,{"children":"保存在本地的方法中，比较常用的就是 storage 和 cookie，我们选择存在 storage 里。"}],"\n",["$","p",null,{"children":["创建一个 ",["$","code",null,{"children":"src/store/firebaseAuthStorage.ts"}]," 文件，提供写入缓存、读取缓存、删除缓存的功能："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$1e"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/store/firebaseAuthStorage.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Storage } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"@plasmohq/storage\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { prefixByEnv } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~lib/prefixByEnv\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" storage"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Storage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"interface"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" AuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseUid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseRefreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FIREBASE_AUTH_KEY"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" prefixByEnv"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"firebaseAuthInfo\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"\t//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 写入缓存"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (info"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" AuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"void"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" storage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"set"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"FIREBASE_AUTH_KEY"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", info)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error setting firebase info:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 读取缓存"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"AuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" info"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" storage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"get"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"FIREBASE_AUTH_KEY"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" info "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"as"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" unknown"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" as"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" AuthInfo"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error getting firebase info:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 删除缓存"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" removeFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"void"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" storage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"remove"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"FIREBASE_AUTH_KEY"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error removing firebase info:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"首先要保证每次登录都更新本地缓存，退出删除本地缓存，依次修改代码："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$1f"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" authService.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { FirebaseAuthStorage } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~store/firebaseAuthStorage\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" ... 其他导入保持不变"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setupFirebaseAuth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onAuthStateChanged"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" currentUser "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：更新存储的认证信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"setFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getIdToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseUid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseRefreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".refreshToken"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"sendMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"AUTH_STATE_CHANGED\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"else"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：如果用户登出，移除存储的认证信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"removeFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" authenticateWithFirebase"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"UserCredential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"((resolve, reject) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"identity"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getAuthToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ interactive"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (token) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastError "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" !"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"token) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" reject"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".lastError)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" credential"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" GoogleAuthProvider"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"credential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", token)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" res"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" signInWithCredential"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, credential)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：存储认证信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"setFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" res"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getIdToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseUid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" res"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseRefreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" res"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".refreshToken"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" resolve"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(res)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" reject"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" signOut"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" auth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"signOut"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"identity"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"clearAllCachedAuthTokens"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：移除存储的认证信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"removeFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" ... 其他代码保持不变"}]]}]]}]}]]}]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":"getFirebaseAuthInfo"}]," 还没用到，这要等后面业务功能开发的时候才用到。"]}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"token-刷新方案","children":["$","a",null,{"className":"anchor-link","href":"#token-刷新方案","children":["token 刷新方案",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"Firebase 返回的 token 有效期是1个小时，如果插件打开时间超过1个小时，就会因为 token 过期而无法通过校验，导致无法使用所有需要校验身份的功能。"}],"\n",["$","p",null,{"children":"虽然我们的插件可以在每次打开的时候刷新 token，但是让用户每1小时重启一次插件显然是不现实的，所以我们需要考虑 token 刷新的方案。"}],"\n",["$","p",null,{"children":"我们从两个方面实现 token 刷新的需求："}],"\n",["$","ol",null,{"className":"list-decimal pl-5 mt-0 mb-4","children":["\n",["$","li",null,{"className":"mb-2","children":"监听 token 刷新"}],"\n",["$","li",null,{"className":"mb-2","children":"遇到 token 过期强制刷新 token"}],"\n"]}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"监听-token-刷新","children":["$","a",null,{"className":"anchor-link","href":"#监听-token-刷新","children":["监听 token 刷新",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":["我们可以使用 Firebase 提供的 ",["$","code",null,{"children":"onIdTokenChanged"}]," 监听器和 ",["$","code",null,{"children":"getIdToken"}]," 方法来实现自动监听 token 刷新。"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// authServer.ts\n \nexport function setupFirebaseAuth() {\n onAuthStateChanged(auth, async (user) => {\n // ... 现有的 onAuthStateChanged 逻辑\n });\n \n // 新增：监听 token 刷新\n onIdTokenChanged(auth, async (user) => {\n if (user) {\n const token = await user.getIdToken();\n await FirebaseAuthStorage.setFirebaseAuthInfo({\n firebaseToken: token,\n firebaseUid: user.uid,\n firebaseRefreshToken: user.refreshToken\n });\n }\n });\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" authServer.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setupFirebaseAuth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onAuthStateChanged"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" ... 现有的 onAuthStateChanged 逻辑"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增：监听 token 刷新"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onIdTokenChanged"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(auth, "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" token"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getIdToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"setFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" token,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseUid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseRefreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".refreshToken"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","h3",null,{"data-docs-heading":true,"className":"text-2xl font-semibold mt-6 mb-4","id":"强制刷新-token","children":["$","a",null,{"className":"anchor-link","href":"#强制刷新-token","children":["强制刷新 token",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":["再添加一个方法，通过强制刷新 token 的方法来获取最新 token，创建 ",["$","code",null,{"children":"firebase/tokenManager.ts"}],"："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$20"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" tokenManager.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { auth } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./config\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { FirebaseAuthStorage } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~store/firebaseAuthStorage\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 检查 token 是否有效"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" isTokenValid"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(token"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"boolean"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 解码 token 以获取过期时间"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" payload"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" JSON"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"parse"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"atob"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"token"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"split"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")["}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"1"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"]));"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" expirationTime"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" payload"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".exp "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"*"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 1000"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 转换为毫秒"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" currentTime"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" Date"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"now"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 如果 token 在 5 分钟内过期，我们认为它无效"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" expirationTime "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (currentTime "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"+"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 5"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" *"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 60"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" *"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 1000"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error checking token validity:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 获取最新 token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getLatestIdToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Promise"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 首先尝试从存储中获取 token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" authInfo"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (authInfo "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" authInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".firebaseToken) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 检查存储的 token 是否有效"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" isTokenValid"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"authInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".firebaseToken)) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" authInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".firebaseToken;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 如果存储的 token 无效或不存在，则尝试刷新"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" auth"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".currentUser;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" newToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"getIdToken"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"); "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 强制刷新 token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 更新本地缓存的 token"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" FirebaseAuthStorage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"setFirebaseAuthInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" newToken,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseUid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" firebaseRefreshToken"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".refreshToken"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" newToken;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error refreshing token:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"其中，为了减少强制刷新 token 的频率，我们每次都先检查本地缓存的 token 是否已过期，如果已过期，才强制刷新 token 并更新。"}],"\n",["$","p",null,{"children":["在 ",["$","code",null,{"children":"firebase/index.ts"}]," 文件中导出新的 ",["$","code",null,{"children":"getLatestIdToken"}]," 方法："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// firebase/index.ts\n \nexport { getLatestIdToken } from \"./tokenManager\" // 新增"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" firebase/index.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { getLatestIdToken } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"./tokenManager\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增"}]]}]]}]}]]}]}],"\n",["$","p",null,{"children":"这样在必须验证 token 的地方就可以通过调用这个方法获取最新 token。"}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"页面用户信息展示和登录逻辑","children":["$","a",null,{"className":"anchor-link","href":"#页面用户信息展示和登录逻辑","children":["页面用户信息展示和登录逻辑",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"有了以上的方法，我们就已经完成了插件端用户信息必要方法的构建了，现在来实现 sidepanel 里面用户信息的展示。"}],"\n",["$","p",null,{"children":[["$","code",null,{"children":"src/sidepanel/index.tsx"}]," 提供 sidepanel 会用到的公共方法和初始的组件，插件页面上的功能模块都放在单独的组件里维护。我们对原来的 sidepanel 进行改造一下，改造后的代码如下："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$21"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"tsx","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"tsx","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/sidepanel/index.tsx"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { useEffect, useState } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"react\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { sendToBackground } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"@plasmohq/messaging\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~/style.css\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Button } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~components/ui/button\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" Header "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~sidepanel/components/Header\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" UserInfoCard "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~sidepanel/components/UserInfoCard\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { UserData } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~types/user\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" IndexSidePanel"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ["}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"] "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" useState"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"UserData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ["}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"loading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"] "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" useState"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ["}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"] "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" useState"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" useEffect"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(() "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 获取初始状态"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getAuthState"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 监听认证状态变化"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" listener"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (request) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"request"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".type "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"==="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"AUTH_STATE_CHANGED\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"request"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".user)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 清除可能存在的错误信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"onMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"addListener"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(listener)"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 立即检查当前状态"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"sendMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ type"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"AUTH_STATE_CHANGED\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }, listener)"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" () "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" chrome"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"runtime"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"onMessage"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"removeListener"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(listener)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }, [])"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getAuthState"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" () "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 检查初始认证状态"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" @ts-ignore"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendToBackground"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ name"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"GET_AUTH_STATE\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"then"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"((response) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".success) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".user)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"else"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" handleLogin"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" () "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"true"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 这里没有用响应里的用户信息，是因为在background中，已经通过 AUTH_STATE_CHANGED 发送了用户信息"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" @ts-ignore"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" response"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendToBackground"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ name"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"LOGIN\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".success) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" throw"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Login error:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".message "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"Login failed\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setLoading"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"false"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" handleLogout"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" () "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" @ts-ignore"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" response"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendToBackground"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ name"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"LOGOUT\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".success) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" throw"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Logout error:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".message "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"Logout failed\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex flex-col p-4\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Header"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {userData "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <>"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"UserInfoCard"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" userData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{userData}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{setUserData}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" error"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{error}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{setError}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" loading"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{loading}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" handleLogout"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{handleLogout}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getAuthState"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{getAuthState}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ) "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Button"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{handleLogin} "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"disabled"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{loading}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {loading "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"?"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"Logging in...\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" :"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"Login with Google\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" )}"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" )"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" default"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" IndexSidePanel"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// src/sidepanel/components/Header.tsx\n \nimport { Button } from \"~components/ui/button\"\nimport { openTwitter, openWebsite } from \"~lib/utils\"\nimport { Globe, Twitter } from \"lucide-react\"\n \nfunction Header() {\n return (\n

\n PH Copilot Guide\n
\n \n \n
\n

\n )\n}\n \nexport default Header"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"ts","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"ts","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/sidepanel/components/Header.tsx"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Button } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~components/ui/button\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { openTwitter, openWebsite } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~lib/utils\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Globe, Twitter } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"lucide-react\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Header"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"h3 className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex justify-between items-center mb-4\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"span className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"text-[#ff6154]\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"PH"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" Copilot Guide"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"div className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex flex-row gap-2\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"Button onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{() => "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"openWebsite"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()} variant"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"outline\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"Globe className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"w-4 h-4\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"Button onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{() => "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"openTwitter"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"()} variant"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"outline\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"Twitter className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"w-4 h-4\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" )"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" default"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" Header"}]]}]]}]}]]}]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"$22"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"tsx","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"tsx","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/sidepanel/components/UserInfoCard.tsx"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Avatar, AvatarFallback, AvatarImage } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~components/ui/avatar\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Button } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~components/ui/button\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Card, CardContent, CardFooter } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~components/ui/card\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { openWebsite } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~lib/utils\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" type"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { UserData } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"~types/user\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"import"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" { Coins, LogOutIcon } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"from"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"lucide-react\""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"interface"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" UserInfoProps"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" userData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" UserData "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setUserData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" UserData "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" =>"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" void"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" error"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" string"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" |"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" =>"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" void"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" UserInfoCard"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" userData,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" setUserData,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" error,"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" setError"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" UserInfoProps"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" handleLogout"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" () "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" //"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" @ts-ignore"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" response"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" sendToBackground"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"({ name"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"LOGOUT\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" })"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".success) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" throw"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" new"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"response"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".error)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Logout error:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" setError"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".message "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"Logout failed\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Card"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"w-full\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"CardContent"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"p-4\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex items-center justify-between space-x-4\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex items-center space-x-4\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Avatar"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"AvatarImage"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" src"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".photoURL} />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"AvatarFallback"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">PH"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"p"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"text-sm font-medium leading-none\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".displayName}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"text-sm text-muted-foreground\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".email}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"text-sm flex items-center\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Coins"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"span"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"p-1\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">{"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".credits "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 0"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"CardFooter"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"flex flex-wrap justify-between\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Button"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" variant"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"outline\""}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{handleLogout}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"LogOutIcon"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"pr-2\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" /> Logout"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Button"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{() "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"=>"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" openWebsite"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"#Pricing\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":")}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Coins"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" /> <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"span"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"pl-2\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">Buy Credits"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {error "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"p"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" style"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{{ color"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"red\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }}>{error}}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" )"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" default"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" UserInfoCard"}]]}]]}]}]]}]}],"\n",["$","p",null,{"children":"打开 sidepanel，登录后可以看到如下界面："}],"\n",["$","p",null,{"children":["$","img",null,{"className":"rounded border-4 border-main","src":"/assets/05/02.webp","alt":"02.png"}]}],"\n",["$","p",null,{"children":"测试登录和登出功能，没问题就行。"}],"\n",["$","p",null,{"children":["现在因为 ",["$","code",null,{"children":"background/firebase/userService.ts"}]," 里面的 ",["$","code",null,{"children":"getCurrentUserInfo"}]," 方法没有返回 ",["$","code",null,{"children":"credits"}],"，所以插件页面没有显示正确的 ",["$","code",null,{"children":"credits"}]," 值。现在改造一下 ",["$","code",null,{"children":"getCurrentUserInfo"}],"，让其把 credits 和 subcription 字段都返回给前端："]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// background/firebase/userService.ts\n \nexport async function getCurrentUserInfo(user: User) {\n if (!user) {\n return null\n }\n \n try {\n const userRef = doc(db, prefixByEnv('users'), user.uid)\n const userSnap = await getDoc(userRef)\n const existingData = userSnap?.data() as Partial | undefined\n \n const currentUser = user && {\n uid: user.uid,\n displayName: user.displayName,\n email: user.email,\n photoURL: user.photoURL,\n lastLoginAt: existingData?.lastLogin,\n credits: existingData.credits || 0,\n subscription: existingData?.subscription || null,\n }\n return currentUser\n } catch (error) {\n console.error(\"Error in updateFirestoreUser:\", error);\n throw error; // 或者根据你的错误处理策略来处理\n }\n}"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"tsx","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"tsx","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" background/firebase/userService.ts"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"export"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" async"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" function"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getCurrentUserInfo"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(user"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" User"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" if"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" ("}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"!"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"user) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" try"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userRef"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" doc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(db, "}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"prefixByEnv"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"users"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"'"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"), "}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" await"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" getDoc"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"(userRef)"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" userSnap"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"data"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"() "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"as"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" Partial"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"<"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"StoreUserData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"> "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"|"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" undefined"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" const"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" currentUser"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" user "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"&&"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" uid"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".uid,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" displayName"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".displayName,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" email"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".email,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" photoURL"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" user"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".photoURL,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" lastLoginAt"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?.lastLogin,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" credits"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".credits "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 0"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" subscription"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":":"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" existingData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"?.subscription "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" null"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" return"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" currentUser"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" } "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"catch"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" (error) {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" console"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"."}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":"error"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"("}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"Error in updateFirestoreUser:\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":", error);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" throw"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" error; "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 或者根据你的错误处理策略来处理"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]}]]}]}]]}]}],"\n",["$","p",null,{"children":"再次打开插件页面，就可以看到 credits 有值了。"}],"\n",["$","p",null,{"children":"现在添加一个手动刷新用户数据的按钮："}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","div",null,{"className":"code-block_wrapper not-prose","children":[["$","$L1b",null,{"className":"code-block_copyButton code-block_copyFloatingButton","text":"// src/sidepanel/components/UserInfoCard.tsx \n \n

\n \n {userData.credits || 0}\n {/* 新增 */}\n \n

"}],["$","pre",null,{"className":"code-block_pre___OLfy","style":{"backgroundColor":"#1e1e1e","color":"var(--shiki-color-text)"},"tabIndex":"0","data-language":"tsx","data-theme":"Custom-Theme","children":["$","code",null,{"data-language":"tsx","data-theme":"Custom-Theme","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"//"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" src/sidepanel/components/UserInfoCard.tsx "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"div"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"text-sm flex items-center\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"Coins"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"span"}],["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"\"p-1\""}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":">{"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"userData"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":".credits "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"||"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":" 0"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" {"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"/*"}],["$","span",null,{"style":{"color":"var(--shiki-token-comment)"},"children":" 新增 "}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"*/"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" <"}],["$","span",null,{"style":{"color":"var(--shiki-token-constant)"},"children":"RefreshCcw"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" className"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"`"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":"w-4 h-4 cursor-pointer transition-transform duration-500 ease-in-out "}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"$${"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" loading"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" ?"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"animate-spin\""}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" :"}],["$","span",null,{"style":{"color":"var(--shiki-token-string-expression)"},"children":" \"\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":" }"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"`"}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-token-function)"},"children":" onClick"}],["$","span",null,{"style":{"color":"var(--shiki-token-keyword)"},"children":"="}],["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":"{getAuthState}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"var(--shiki-color-text)"},"children":" "}]]}]]}]}]]}]}],"\n",["$","p",null,{"children":"验证一下，修改 Firestore 里的数据，然后点击刷新按钮："}],"\n",["$","p",null,{"children":["$","img",null,{"className":"rounded border-4 border-main","src":"/assets/05/03.webp","alt":"03.png"}]}],"\n",["$","p",null,{"children":"实测可以生效，说明刷新功能没问题。"}],"\n",["$","h2",null,{"data-docs-heading":true,"id":"总结","children":["$","a",null,{"className":"anchor-link","href":"#总结","children":["总结",["$","span",null,{"className":"anchor-icon","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"16","height":"16","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.2","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","path",null,{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["$","path",null,{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]]}]}]]}]}],"\n",["$","p",null,{"children":"本章完成了插件端用户信息的获取和入库，以及插件前端展示用户信息，下一章我们要在 Next.js 落地页里实现类似的需求。"}],"\n",["$","p",null,{"children":["截止本章的源码可以在 ",["$","code",null,{"children":"firebase"}]," 分支查看：",["$","a",null,{"className":"text-[#006bff] hover:text-[#68b5fb]","href":"https://github.com/weijunext/ph-copilot-dev-guide/tree/firebase","rel":"nofollow noopener noreferrer","target":"_blank","children":["https://github.com/weijunext/ph-copilot-dev-guide/tree/firebase",["$","span",null,{"children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":"14","height":"14","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round","style":{"display":"inline-flex"},"children":[["$","polyline",null,{"points":"15 3 21 3 21 9"}],["$","line",null,{"x1":"10","y1":"14","x2":"21","y2":"3"}]]}]}]]}]]}]]

\n PH Copilot Guide\n \n openWebsite()} variant=\"outline\">\n \n \n openTwitter()} variant=\"outline\">\n \n \n \n

\n PH Copilot Guide\n
\n \n \n
\n