Large Rainbow Pointer
반응형
[Next.js] Server Sider Rendering 특정 사용자 접근 제한 (feat. App Router)
💜 리액트/Next.js2024. 8. 11. 17:25[Next.js] Server Sider Rendering 특정 사용자 접근 제한 (feat. App Router)

시작하며...게시물 수정 페이지 같은 경우 해당 게시글을 작성한 사용자만 수정이 가능하다. 그래서 작성자에게만 수정 버튼이  렌더링 되지만 만약 그렇지 않은 사용자가 주소창을 통해 강제로 수정 페이지로 이동하였을 때, 해당 게시글의 작성자가 아니면 접근을 하지 못하게 막아야 된다. Next.js Server Side Rendering 에서 이를 구현하는 방법에 대해 알아볼 것이다. 구현 방식현재 로그인한 유저의 user id 와 게시물을 작성한 user id 를 비교해서, 다르면 not found 페이지로 이동시킨다. 로컬 스토리지서버 사이드 렌더링은 서버에서 페이지를 렌더링하며, 브라우저 API 인 document, window 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

[React] axios 로그인 유저 기능 구현 (feat. 토큰)
💜 리액트/React2024. 6. 17. 21:46[React] axios 로그인 유저 기능 구현 (feat. 토큰)

시작하며...프론트엔드에서 React, Axios 를 사용하면서 로그인/회원가입 기능을 구현할 때 서버에서 쿠키로 refresh token 과 access token 을 받아 유저 기능를 하는 방법에 대해 알아볼 것이다. 로그인 기능 구현React 와 axios 로 서버에 로그인 요청을 하는 코드를 작성해서 실행을 하면응답으로 서버에서 쿠키로 access token 과 refresh token 를 보내주게 된다.서버에서 전달해준 쿠키를 클라이언트 측에서 저장하기 위해 withCredentials 를 true 로 설정한다.다시 로그인 요청 후 개발자 도구 → 애플리케이션 탭 → 쿠키 를 확인해보면 서버에서 전달받은 토큰이 쿠키에 제대로 저장되는 것을 확인할 수 있다. 그러면 이제 서버에 요청을 보낼 때도 ..

반응형
image
loading