작성
·
185
0
passport.deserializeUser(async (id, done) => {
try {
const user = await db.User.findOne({
where: { id }
});
return done(null, user); // 이 때 req.user에 유저 정보 저장
} catch (e) {
console.error(e);
return done(e);
}
});
local();
};
deserializeUser 의 callback 함수에서 done 으로 넘겨지는 user 데이터는 findOne({ where: {id}) 로 조회된 데이터인데요.
이 데이터에는 Followings, Followers 프로퍼티가 포함되지 않습니다. 그러다보니, 5-14에서 발생했던 것 처럼, front/component/AppLayout/UserPorfile 내부 아래 코드에서 에러가 발생하게 됩니다.
import React, { useCallback } from 'react';
import { Card, Avatar, Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { LOGOUT_REQUEST } from '../../reducers/user';
const UserProfile = () => {
const { me } = useSelector(state => state.user);
const dispatch = useDispatch();
const onLogout = useCallback(() => {
dispatch({
type: LOGOUT_REQUEST,
});
}, []);
return (
<Card
actions={[
<div key="twit">
짹짹
<br />
{me.Posts.length}
</div>,
<div key="following">
팔로잉
<br />
{me.Followings.length}
</div>,
<div key="follower">
팔로워
<br />
{me.Followers.length}
</div>,
]}>
<Card.Meta
avatar={<Avatar>{me.nickname[0]}</Avatar>}
title={me.nickname}
/>
<Button onClick={onLogout}>로그아웃</Button>
</Card>
);
};
export default UserProfile;
이를 해결하기 위해서는 deserializeUser 에서 login 라우터에서 처럼 데이터를 조회해서 req.user에 저장해야 할 것 같습니다.
아래 코드와 같이 말이죠
- deserializeUser
passport.deserializeUser(async (id, done) => {
try {
const user = await db.User.findOne({
where: { id },
include: [
{
model: db.Post,
as: 'Posts',
attributes: ['id']
},
{
model: db.User,
as: 'Followings',
attributes: ['id']
},
{
model: db.User,
as: 'Followers',
attributes: ['id']
}
],
attributes: ['id', 'nickname', 'userId']
});
return done(null, user); // 이 때 req.user에 유저 정보 저장
} catch (e) {
console.error(e);
return done(e);
}
});
local();
};
이에 대해 어떻게 생각하시나요?