在 Nuxt js 項目中重新加載頁面后，如何從 Firebase 獲取用戶信息？

Question

在我的項目中，用戶可以使用電子郵件、google 和 facebook 帳戶登錄。 登錄后，我將令牌保存在我的 cookie 中。 當用戶使用他/她的帳戶進入 web 站點時，我可以輕松訪問他/她的信息。 但是當我重新加載頁面時，我無法再次訪問這些信息。 通常，當頁面重新加載時，我可以從 cookie 中獲取我的令牌，但問題是我不知道如何使用此令牌獲取用戶信息

    async SIGN_IN_WITH_EMAIL({commit}, form) {
        try {
            await auth.signInWithEmailAndPassword(form.email, form.password)
            const token = await auth.currentUser?.getIdToken();
            const {email, uid, refreshToken} = auth.currentUser;
            commit("SET_USER", {email, uid, refreshToken});
            this.$storage.setCookie("access_token", token)

        } catch (err) { 

            console.log("error", err.message)
        }

    },

當用戶使用 email 登錄時。 （我也有與此類似的 google 和 facebook 登錄。）

   nuxtServerInit({commit}, {req}) {
        if (process.server && process.static) return;
        if (!req.headers.cookie) return;

        const parsed = cookieParser.parse(req.headers.cookie);
        const accessTokenCookie = parsed.access_token;

        if (!accessTokenCookie) return;

        const decoded = JWTDecode(accessTokenCookie);

        if (decoded) {
            commit("SET_USER", {
                uid: decoded.user_id,
                email: decoded.email
            });
        }


    }

重新加載頁面時，我可以輕松地使用 nuxtServerInit 獲取令牌。

Answer 1

想象一下，它在 Vue 中與在 NodeJs 中是相似的。 這就是我將如何解決你的問題。

首先，在重新加載頁面時調用 getUser function。

const getUser = (req: any, res: any) => {
  userData(req.user.uid)
    .then((doc) => {
      if (doc.exists) {
        const credentials = doc.data();
        return res.status(200).json({ credentials });
      } else {
        const error = { code: 'auth/rejected-credential' };
        return res.status(403).json(error);
      }
    })
    .catch((err) => {
      return res.status(500).json(err);
    });
};

userData在哪里

export const userData = (uid: string) => {
  return db.doc(`/users/${uid}`).get();
};

通過中間件獲取uid以從sessionCookie中對用戶進行身份驗證，然后向下傳遞。

export const auth = (req: any, res: any, next: () => any) => {
  const { sessionCookie } = req.headers.cookie; 
  if (sessionCookie) {
    admin
      .auth()
      .verifySessionCookie(sessionCookie, true)
      .then((decodedToken: any) => {
        req.user = decodedToken;
        return db
          .collection('users')
          .where('uid', '==', req.user.uid)
          .limit(1)
          .get();
      })
      .then((data) => {
        req.user.uid = data.docs[0].data().uid;
        return next();
      })
      .catch((err: any) => {
        return res.status(403).json(err);
      });
  } else {
    const error = { code: 'auth/rejected-credential' };
    return res.status(200).json(error);
  }
};

同樣，您需要重寫才能在 Nuxt 中使用。