[英]PassportJs get details of logged in user on page refresh in react app
我正在使用服務器處理帶有護照js的身份驗證的簡單博客應用程序。 這是我的服務器代碼:
import express from 'express';
import passport from 'passport';
import cookieSession from 'cookie-session'; // encrypt cookie
import router from './routes/routes';
import authRouter from './routes/authRoutes';
import middleware from './middleware';
import keys from './keys';
const app = express();
// use cookies for login/logout session, send cookie to browser
// happens only when user logs in.
app.use(cookieSession({
maxAge: 24 * 60 * 60 * 1000, // 1 day
keys: [keys.session.cookieKey], // encrypt cookie
}));
app.use(passport.initialize());
app.use(passport.session());
// auth routes
app.use('/auth', authRouter);
import Router from 'express';
import passport from 'passport';
import GoogleStrategy from 'passport-google-oauth20';
import popupTools from 'popup-tools';
import { User } from '../database/model';
import keys from '../keys';
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser(async (id, done) => {
const usr = await User.findById(id);
done(null, usr);
});
passport.use(new GoogleStrategy({
clientID: keys.google.clientID,
clientSecret: keys.google.clientSecret,
callbackURL: '/auth/google/redirect',
}, async (accessToken, refreshToken, profile, people, done) => {
let usr = await User.findOne({ googleID: people.id });
if (!usr) {
const user = new User({
name: people.displayName,
email: people.emails[0].value,
googleID: people.id,
image: people._json.image.url,
});
usr = await user.save();
}
// calls serializeUser
done(null, usr);
}));
const authRouter = Router();
authRouter.get('/google', passport.authenticate('google', {
scope: ['profile', 'email'],
}));
authRouter.get('/logout', (req, res) => {
req.logout();
res.set('Content-Type', 'text/html');
res.end(popupTools.popupResponse({
status: true,
message: 'Logged out!',
}));
});
// callback for google auth
authRouter.get('/google/redirect',
passport.authenticate('google'),
(req, res) => {
// here we have the user as req.user
res.set('Content-Type', 'text/html');
res.end(popupTools.popupResponse({
status: true,
message: {
data: req.user,
},
}));
}
);
// I want this route to get me the current user
authRouter.get('/getActiveUser', (req, res) => {
res.json({
user: req.user,
});
});
export default authRouter;
我正在使用popupTools來幫助登錄彈出窗口。 在前端,當用戶登錄並關閉彈出窗口時,我將用戶信息保存在mobx存儲中。 但是,當我重新加載頁面時,我無法保留任何信息。 我希望在服務器上找到一條路由,例如/ getActiveUser,從中我可以讓用戶當前登錄。但這似乎不起作用。
您將需要在React App中使用localStorage
API或sessionStorage
。 我使用localStorage
,例如:
用戶成功通過身份驗證后,將用戶對象保存在localStorage中: localStorage.setItem('user', JSON.stringify(userObject));
一旦使用您的mobx
將React應用安裝在瀏覽器中,就可以從localStorage
加載用戶,例如: const user = JSON.parse(localStorage.getItem('user'));
這樣,您就可以擁有用戶對象,以防萬一您想再次使用它,可以保存用戶的會話。
在注銷過程中,您將從localStorage
刪除user
的Item。 localStorage.removeItem('user');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.