如何在 NuxtJs 应用程序中通过 firebase 身份验证重定向到主页

Question

我正在为我的 NuxtJs 应用程序使用 firebase 身份验证。 firebase只在客户端初始化，所以和firebase相关的一切都在客户端完成。

最初，我在商店中将状态 'user' 设置为 null。在已安装组件中的 default.vue（这是默认布局页面）上，我发送了一个检查用户身份验证状态的操作即 firebase.auth().onAuthStateChanged()。之后，如果用户登录到应用程序，用户状态将更新为一个对象（由 firebase 返回）。

现在，login/signup 页面位于路由 'http://localhost:3000/authentication'。现在我想做的是，当用户刷新该路由（页面）时，它应该检查是否有对象处于 'user' 状态（这意味着用户已登录），然后重定向到主页，即 'http://localhost:3000/'，如果 'user' 为空，则它应保留在同一页。

我已经使用中间件检查商店中的用户状态。

现在这在客户端（导航时）工作正常但在服务器端（刷新页面时）不行，因为在服务器端，商店的状态 returns null 因为与 firebase 相关的一切都发生在客户端因此用户状态也只在客户端更新。

firebase 的问题是它也只在客户端初始化，如果初始化两次（在客户端和服务器上）returns 错误。

那么，如何在服务器端更新存储中的用户状态？

在我看来，这种服务器端呈现相当混乱和复杂，而不是有用。

Answer 1

获得 Firebase 身份验证以使用 NuxtJS 有点困难。我所做的是在用户登录时在 cookie 中添加一个令牌：

import {set} from "js-cookie"
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Set a cookie
    set("user", "1") 
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

现在，每当您加载页面（比方说 /login）时，检查该 cookie 是否存在于您的中间件或 asyncData 中。现在，如果您还需要验证它是哪个用户，则在页面呈现之前您将需要 Firebase ID 令牌（可以通过将 IdToken 本身设置为 cookie 但不推荐）。为了克服这个问题，我将自定义 JWT 存储在包含用户 UID 的 cookie 中，以便我知道它是谁。然后在 asyncData 中识别变得简单，如下所示：

asyncData (ctx) {
  //get the cookies
  const cookies = ctx.headers.cookies
  // parse them and check if it exists.
  if (isCookiePresent("loginIdentifier")) return ctx.redirect("/home")
  // else stay on login page
}

要验证 cookie，请使用此 package。

import {parse} from "cookie"
const parsedCookies = parse(ctx.headers.cookies)

cookie可以像user: 1一样简单，即如果它是1，则表示用户已登录。如果您只需要检查是否有人登录并且在呈现之前不需要该用户的信息这个页面就好了

如何在 NuxtJs 应用程序中通过 firebase 身份验证重定向到主页

How to redirect to homepage on firebase authentication in NuxtJs app

javascript

firebase

nuxtjs