목표
현재 로그인한 유저(=나)의 데이터를 ‘내 프로필’ 페이지에 펼쳐놓는 게 목표다. 대충 이름, 이메일, 책갈피 데이터가 있다.
Strapi는 현재 로그인한 유저의 데이터를 읽을 수 있는 api를 만들어 놓았다. /api/users/me이다. 여기 접근하려면 token이 필요하다. 나는 token을 쿠키에다가 넣어놨다. 그래서 프론트엔드 앱에서 로그인을 해 쿠키가 있는 상태에서 저 api에 접근해야 한다. 그 api에 뭐가 들었는지 테스트를 할때는 insomnia에서 Header에 key는 Authorization으로, value에는 jwt 토큰을 복붙하여 GET 요청을 하면 된다.
프론트엔드 앱에서 userdata를 가져오는 api 만들기
api/auth/me/route.ts
잘 모르겠지만 { cookies }인지 { NextResponse }인지가 client component에서 안돼서 api/auth/me라는 엔드포인트를 만들어줘서 거기서 Header에 토큰을 담아 fetch를 했다.
usercard.tsx
내프로필에 직접 담기는 client component다. 만들어준 api 엔드포인트에서 fetch해서 useState를 이용해 유저 데이터를 담아준다.
populate가 안되는 문제
유저 데이터에 유저가 책갈피한 캘린더 일정을 ‘Calendar’와의 relation으로 넣어 놨다. 내 프로필에서 유저가 책갈피한 일정을 보여주려고. 근데 유저 api가 populate가 안되는 거다.
어떤 사람은 유저의 role을 가져오고 싶은데 populate가 안된다고 했다. 그러다가 해결했는데 USERS & PERMISSIONS 플러그인에서 authenticated 유저의 Role의 find를 체크했더니 됐다고 했다. 그래서 나는 ‘Calendar’가 안되니 ‘Calendar’의 find를 체크해주니까 떴다!
그 반대도 마찬가지다. Calendar와 User의 관계는 다대다, 양방향 관계로 해 놓았기 때문에 양쪽의 api에서 서로를 참조할 수 있어야 하는데 calendar에서 user가 안 보였다. 역시 USERS & PERMISSIONS PLUGIN > Roles > Authenticated > Users-permissions > User > find, findOne을 체크하니 된다.
근데 그러면 자기가 아닌 유저도 볼 수 있어서 체크 취소했다. 북마크 관련해서는 user 안의 calendars를 사용할것.