时间戳

首页 > 解决方案 > 在 Nuxt js 项目中重新加载页面后如何从 Firebase 获取用户信息？

javascript - 在 Nuxt js 项目中重新加载页面后如何从 Firebase 获取用户信息？

问题描述

在我的项目中，用户可以使用电子邮件、google 和 facebook 帐户登录。登录后，我将令牌保存在我的 cookie 中。当用户使用他/她的帐户进入网站时，我可以轻松访问他/她的信息。但是当我重新加载页面时，我无法再次访问这些信息。通常，当页面重新加载时，我可以从 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)
        }

    },

当用户使用电子邮件登录时。（我也有与此类似的 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 获取令牌。

标签： javascriptreactjsfirebasefirebase-authenticationnuxt.js

解决方案

想象一下，它在 Vue 中与在 NodeJs 中是相似的。这就是我将如何解决你的问题。

首先，在重新加载页面时调用 getUser 函数。

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 中使用。

推荐阅读