nextjs jwt authentication
1.0.0
JWT를 사용한 Next.js 앱의 인증을 보여주는 개념 증명 앱.
앱은 렌더링 서버와 API 서버가 분리된다는 가정하에 이루어집니다.
인증을 위해이 API를 사용합니다.
서버 측 렌더링 된 앱은 훌륭합니다. 그들은 모 놀리 식 앱과 마이크로 서비스로 구동되는 단일 페이지 앱 사이에서 달콤한 지점을 만듭니다. 그러나 그들은 또한 그들의 창조물에 복잡성을 더합니다. 서버와 클라이언트에 상태를 유지하고 클라이언트 및 서버에서 라우팅, 서버 렌더링 전에 데이터를로드하는 등의 상태를 유지하는 것은 앱을보다 복잡하게 만드는 것 중 일부입니다. 그렇기 때문에 다음 문제를 해결하기 위해 Next.js와 같은 프레임 워크가 존재합니다. 그러나 인증과 같은 것들이 우리에게 맡겨집니다. 이것은 JWT를 기반으로 인증을 구현하려는 시도입니다. 문제는 우리가 스파와 마찬가지로 현지 스토리지에 토큰을 보관할 수 없다는 것입니다.
아이디어는 클라이언트의 서버에서 토큰을 수신하고 쿠키에 저장 한 다음 서버에서 페이지가 렌더링 될 때마다 쿠키에서 토큰에 액세스 할 수 있습니다.
사용자는 클라이언트로부터 인증 요청을 보냅니다. 이에 따라 JWT가 접수되어 브라우저 쿠키 및 Redux 상점에 저장됩니다. 그런 다음 사용자는 클라이언트의 토큰에 액세스 할 수 있으며이를 사용하여 보호 된 경로에 액세스 할 수 있습니다.
사용자가 페이지 요청을 할 때 쿠키도 전송되므로 서버가 읽을 수 있습니다. 읽기 위해, 사용자는 다음에 제공하는 getInitialProps 라이프 사이클 방법을 사용하고 있습니다. 그것은 일부 속성을 포함하는 컨텍스트 객체 인 인수를 얻습니다. 당신은 그것에 대해 더 읽을 수 있습니다. req 속성에서는 토큰이있는 쿠키가 포함 된 headers 속성에 액세스 할 수 있습니다. 액션 제작자가 파견되어 Redux 매장에 토큰을 저장하고 이제 앱이 다시 토큰에 액세스 할 수 있습니다.
노드와 NPM이 설치되어 있는지 확인하십시오.
또한 API 서버가 실행되도록하십시오.
git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install # Run in dev mode:
npm run dev
# Run in production:
npm run build
npm start
