next.js에서 페이지 접근 권한 관리 방법

Question

현재 회사에서 next로 개발중인데요!
각 page마다 접근 관리를 개선해보려고 합니다.
현재 각 page에 해당하는 component에 내 정보가 있는지 없는지 확인해서 redirect해주는 custom hook으로 접근을 제한하고 있는데, 이는 한눈에 들어오지도 않고 한눈에 들어오지도 않고 일일히 page마다 hook을 넣어줘야해서 비효율적인거 같습니다!
따라서, react-query key를 관리하는 방식처럼 한 파일에 모든 route를 모아놓고, _app.tsx에서 route 체크를 통해 application 코드는 건들지 않고 route.ts만 수정하는 방법으로 각 route의 접근 설정을 해보려고 하는데 혹시 더 좋은 방법이 있을까요???

최경훈 · Answer

middleware를 사용하면 효율적일것 같습니다. next.js의 버전에 따라 사용방법은 다르지만 root쪽에서 유저정보 확인해서

- 로그인 상태만 접속가능한 페이지
- 로그아웃 상태만 접속가능한 페이지

분기해서 NextResponse.redirect(/path) 이런식으로 걸어주곤 합니다

김형준 · Answer

JWT 토큰에 권한 혹은 그룹 정보를 추가하는 방법은 어떤가요 ?

Next.js 와 NextAuth.js를 같이 사용해 보았는데 인증을 구현하기 간편하게 되어 있더라고요. 한 번도 이러한 방법으로 구현해 본 적은 없지만, JWT payload에 권한 관련된 정보를 추가하고 SSR 혹은 middleware에서 필요한 권한을 체크해서 redirect 해주는 방식도 좋을 것 같아요.

이 방식에서 유의해야 할 점은 권한 정보가 크고 복잡하면 JWT 토큰 크기가 커지기 때문에 신경 써줘야 하고, 권한이 주기적으로 변경되는 경우 outdate 된 권한 정보를 가진 토큰이 많아지기 때문에 refresh 시켜주는 방법을 고려해 줘야 합니다. (NextAuth.js 가 이 부분 구현하기 편하게 되어있는 것 같아요.)