nextjs jwt authentication

next.js JWT認証

JWTを使用したnext.jsアプリの認証を示すための概念の証明アプリ。

アプリは、レンダリングサーバーとAPIサーバーが分離されているという仮定の下で作成されます。

認証にこのAPIを使用します。

アイデア：

サーバー側のレンダリングアプリは素晴らしいです。モノリシックアプリとマイクロサービスを搭載したシングルページアプリとの間にスイートスポットを作成します。しかし、彼らはまた、彼らの創造に複雑さを加えます。サーバーとクライアントの状態を同期させ、クライアントとサーバーのルーティング、サーバーのレンダリングの前にデータをロードするなど、アプリをより複雑にするものの一部です。そのため、これらの問題のほとんどを解決するために、next.jsなどのフレームワークが存在します。ただし、認証などのものは私たちに残されています。これは、JWTに基づいて認証を実装する試みです。問題は、SPAで行うように、LocalStorageにトークンを保管できないということです。

アイデアは、クライアントのサーバーからトークンを受け取り、Cookieに保存し、ページがサーバー上にレンダリングするたびに、Cookieからトークンにアクセスできるようにすることです。

それがどのように機能するか：

クライアント：

ユーザーは、クライアントから認証要求を送信します。応答では、JWTが受信され、ブラウザCookieとReduxストアに保存されます。その後、ユーザーはクライアントからトークンにアクセスし、それを使用して保護されたルートにアクセスできます。

サーバー：

ユーザーがページリクエストを行うと、Cookieも一緒に送信されるため、サーバーはそれらを読み取ることができます。それを読むために、ユーザーはgetInitialPropsライフサイクルメソッドを使用しています。それは引数を取得します - いくつかのプロパティを含むコンテキストオブジェクト。詳細については、こちらをご覧ください。 reqプロパティでは、トークン付きのCookieを含む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