nextjs jwt authentication

Next.js JWT身份驗證

用於使用JWT證明Next.js應用的身份驗證的概念驗證應用程序。

該應用是在假設渲染服務器和API服務器被解耦的假設下進行的。

它使用此API進行身份驗證。

主意：

服務器端渲染應用程序很棒。它們在整體應用程序和由微服務提供動力的單頁應用程序之間成為一個甜蜜的位置。但是它們也為他們的創造增加了複雜性。保持狀態在服務器上，客戶端，在客戶端和服務器上進行路由，在服務器渲染之前加載數據等是使我們的應用程序更加複雜的某些內容。這就是為什麼存在諸如Next.js之類的框架來解決大多數問題的原因。但是，諸如身份驗證之類的東西留給了我們。這是試圖基於JWT實施身份驗證的嘗試。問題是我們不能像水療中心那樣存儲在LocalStorage中的令牌。

這個想法是從客戶端上的服務器接收令牌，將其存儲在cookie中，然後每當在服務器上呈現頁面時，我們都可以從cookie訪問令牌。

它的工作原理：

客戶：

用戶從客戶端發送驗證請求。在響應中，收到JWT並存儲在瀏覽器餅乾和Redux商店中。然後，用戶可以從客戶端訪問令牌，並可以使用它來訪問受保護的路由。

伺服器:

當用戶提出頁面請求時，也會發送cookie，以便服務器可以讀取它們。要閱讀它，用戶使用Next.js提供的getInitialProps生命週期方法。它得到一個參數 - 包含某些屬性的上下文對象。您可以在這裡閱讀更多有關它的信息。在req屬性上，我們可以訪問包含帶有令牌的cookie的headers屬性。派遣了動作創建者以將令牌保存在Redux Store中，並且該應用程序現在可以再次訪問令牌。

用法：

安裝：

確保安裝了節點和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