next.js Firebase身份验证:getIdToken在每个获取或设置cookie?

mnowg1ta  于 2023-08-04  发布在  其他
关注(0)|答案(2)|浏览(81)

我目前正在做一个Next.js(React)项目,在那里我使用Firebase Auth进行身份验证。我使用它连接到REST API后端,它接收Firebase提供的用户令牌(通过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的方法,会有什么好处吗?

kuhbmx9i

kuhbmx9i1#

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

nszi6y05

nszi6y052#

在cookie或本地存储中设置身份验证令牌:
在身份验证期间获得Auth令牌后,您可以将其存储在cookie或本地存储中。当您需要使用服务器端呈现(SSR)请求发送Auth令牌时,最好使用cookie,而本地存储对于仅限客户端的应用程序是一个很好的选择。
下面是在cookie中设置Auth令牌的示例:

import Cookies from 'js-cookie';

// ...

useEffect(() => {
  const fetchUserData = async () => {
    try {
      const user = firebase.auth().currentUser;
      if (user) {
        // Get the Auth token
        const token = await user.getIdToken();

        // Set the Auth token in a cookie
        Cookies.set('authToken', token);

        // Make the API request with the Auth token in the headers
        // Your fetch code here
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchUserData();
}, []);

字符串

相关问题