在API认证头中从前端到后端发送firebase用户令牌而无需每次获取令牌的最佳方法是什么?(NextJs))

Question

我需要在我的next.js中的每个API请求中在API授权头中发送firebase用户令牌应用。

当前实现:

axios.interceptors.request.use(
async (config) => {
const token = await firebase.auth().currentUser?.getIdToken(true);
if (token) {
config.headers["Authorization"] = "Bearer " + token;
}
return config;
},
(error) => {
return Promise.reject(error);
}
)

但是这个实现的问题是用户令牌在每个影响应用程序性能的请求之前从firebase获取。

有没有更好的实现方法?我正在考虑将令牌存储在本地存储中，并从localStorage而不是firebase获取令牌。

firebase.auth().onAuthStateChanged(async (user) => {
try {
if (user) {
const token = await user.getIdToken(true);
await localStorage.setItem("app_session", token);
}
} catch (err) =>{
// Handle error
}
}

像这样使用

axios.interceptors.request.use(
async (config) => {
const token = localStorage.getItem("app_session");
if (token) {
config.headers["Authorization"] = "Bearer " + token;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);

Answer 1

关于如何最好地在前端应用程序中存储身份验证令牌的主题已经写了很多。有几种解决方案，每种都有其优点和缺点。前面的答案可能会给你一些启发。

这篇文章给出了一个很好的概述，并解释了为什么存储在内存中可能是最好的选择。这是另一篇有类似结论的文章

在您的示例中，您可能将令牌存储在内存中。当需要时，检查它是否存在，如果它不在内存中(考虑浏览器刷新)，则调用Firebase检索令牌并再次将其存储在内存中。

当然，您应该查看您的特定上下文和需求，并决定是否有任何其他解决方案(例如localStorage)可能适合您和您的安全需求。