[英]How to get user informations from Firebase after page reloaded in Nuxt js project?
在我的项目中,用户可以使用电子邮件、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 获取令牌。
想象一下,它在 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 中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.