[英]How to get user informations from Firebase after page reloaded in Nuxt js project?
In my project, users can login with e-mail, google and facebook accounts.在我的项目中,用户可以使用电子邮件、google 和 facebook 帐户登录。 After log in, i keep token in my cookie.
登录后,我将令牌保存在我的 cookie 中。 When user entered web site with his-her account, i can reach his-her informations easily.
当用户使用他/她的帐户进入 web 站点时,我可以轻松访问他/她的信息。 But when i reloaded page, i can't reach these informations again.
但是当我重新加载页面时,我无法再次访问这些信息。 Normally, when page reloaded, i can get my token from cookie but problem i don't know how to get user informations by using this token
通常,当页面重新加载时,我可以从 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)
}
},
When user logged in with email.当用户使用 email 登录时。 (also i have google and facebook login similiar to the this.)
(我也有与此类似的 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
});
}
}
When page reloaded, i can get token with nuxtServerInit easily.重新加载页面时,我可以轻松地使用 nuxtServerInit 获取令牌。
Imagine it's similar in Vue as it is in NodeJs.想象一下,它在 Vue 中与在 NodeJs 中是相似的。 This is how I would tackle your problem.
这就是我将如何解决你的问题。
First, on reload of the page call getUser function.首先,在重新加载页面时调用 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);
});
};
Where as userData
is userData
在哪里
export const userData = (uid: string) => {
return db.doc(`/users/${uid}`).get();
};
To get the uid
pass through middleware to authenticate the user from the sessionCookie
and then pass down.通过中间件获取
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);
}
};
Again, you'll need to rewrite for use in Nuxt.同样,您需要重写才能在 Nuxt 中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.