reactjs - Firebase 身份验证 : getIdToken on every fetch or set cookie?

标签 reactjs firebase cookies firebase-authentication next.js

我目前正在开发一个 Next.js (React) 项目,我使用 Firebase Auth 进行身份验证。我使用它连接到 REST API 后端,该后端接收 Firebase 提供的用户 token (通过 getIdToken() )。
因为 IdToken 时不时地发生变化,所以我目前在发送 fetch 之前请求最新的 IdToken像这样的请求:

  const fetcher = (url: string) => {
      return user.getIdToken().then((token) =>
        fetch(url, {
          method: "GET",
          headers: new Headers({
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          }),
        }).then((res) => res.json())
      );
  };
这个设置确实有效,但我想知道它是否被认为是有效/最佳实践?
我看到很多使用 IdToken 设置 cookie 的示例(例如 firebase docsnext.js example )。
我明白为什么在使用 SSR 时,因为 getIdToken()不能在那里调用。但我的应用程序只使用客户端数据获取。放弃目前使用 cookie 的方法对我有什么好处吗?

最佳答案

Firebase 身份验证 SDK 已将 token 缓存在本地存储中,因此您无需再次将其缓存在其他地方。
实际上, token 每小时刷新一次,Firebase Authentication SDK 会在后台自动刷新它。如果您自己缓存 token ,您最终可能会使用过时的 token 。
所以我建议总是调用getIdToken()当您需要 ID token 时。当然,可以将它存储在一个变量中,并在单个代码块中使用它(几乎同时运行的代码)。
使用 cookie 将 token 传递给您的服务器很好,使用 Authorization 也是如此。就像你现在做的那样。后者更常见,但 cookie 也可以。

关于reactjs - Firebase 身份验证 : getIdToken on every fetch or set cookie?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62573086/

相关文章:

reactjs - 如何在 React SPA 的浏览器中保留 Auth0 登录状态

javascript - 如何将组件的整个状态作为单个对象检索?

javascript - 即使父状态更新,复选框也不会更新对子项的 react ?

reactjs - Material-UI:如何访问组件内的所有调色板阴影

node.js - 使用服务帐户将 Firebase 应用程序部署到 Heroku(使用 dotenv 的环境变量)

javascript - AngularJS + Firebase - 获取远程数据时范围不更新

json - 如何为 Firestore 创建大量示例数据?

session - Coldfusion 10跨域HTTPS session 问题

javascript - 在将图像发送到 S3 之前,在前端调整图像大小,javascript

session - 在flask中设置Cookie重定向到外部URL