uni's code uni's code

들어가며 지난 번 글([Next.js] Next.js 13에서 유저의 권한에 따른 protected route / protected api Setting (권한에 따른 페이지 접근 제한)에서 권한에 따라 페이지 접근 로직을 다루었다. 이 글에 나온 내용에서 방안4인 middleware를 사용한 방법으로 실제 프로젝트에 도입해보려고 한다. next.js에서 middleware는 페이지를 이동하려고 할 때, 중간에 검증 함수 역할을 한다. 여기서 유저의 권한 인증에 대해 검증 함수를 추가하여, 유저 권한에 따른 페이지 접근 가능 여부를 구현가능하다. 예를 들어, 로그인한 유저가 로그인 페이지에 접근하는 것은 올바르지않다. 반대로, 로그인 하지 않은 유저가 로그인이 필요한 마이페이지에 접근하는 것도 옳지 않다..

들어가며 개인 프로젝트를 저번 달부터 안정화가 된 next.js 13으로 진행하고 있다. 로그인 유무에 따라 페이지 접근 권한을 제한하는 셋팅을 적용하면서, 정리한 내용을 적어본다. 12와 달라진 점에 대해서도 나중에 블로그에 적어야겠다. ✏️ 목적 유저의 상태에 따라 접근 페이지 구분이 필요하다. 예를 들어, 로그인한 유저가 로그인 페이지에 접근하는 것은 올바르지않다. 반대로, 로그인 하지 않은 유저가 로그인이 필요한 마이페이지에 접근하는 것도 옳지 않다. next.js 13은 server rendering을 지원하기 때문에, protected route를 지정할 때 “어디서” 유저의 권한을 확인하는지가 중요하다. 그래서 "어디서"를 초점으로 사용할 수 있는 방법들에 대해 알아보자. 방안 1) clie..

vue를 사용할 때는 vue-router에서 제공하는 navigation guard 기능이 있었기 때문에, 각 페이지에 접근을 할 때 guard 처리해주기가 수월했다. 하지만, next.js에서는 그러한 기능이 따로 없기 때문에 직접 만들어야 했다. 그래서, hoc를 통해 next.js router guard(navigation guard)를 만들어보고자 한다. 1) 목적 각 페이지에 접근을 할 때, 각 페이지별 접근을 할 수 있는 유저가 있고, 접근이 불가능한 유저가 있을 것이다. 예를 들어, 로그인 페이지 같은 경우 로그인을 안한 유저는 접근이 가능하지만, 이미 로그인 한 유저라면 접근이 불가능하게 만들어야 한다. 이러한 접근에 대한 검사를 매 페이지마다 이루어져야 하는데, 각 페이지 컴포넌트에 이 ..