nextjs jwt authentication
1.0.0
Eine Proof -of -Concept -App zur Demonstration der Authentifizierung der nächsten.js -App mit JWT.
Die App wird unter der Annahme gemacht, dass der Rendering -Server und der API -Server entkoppelt sind.
Es verwendet diese API zur Authentifizierung.
Server -Seite rendered Apps sind fantastisch. Sie machen einen Sweet Spot zwischen monolithischen Apps und einzelnen Seiten -Apps, die von Microservices betrieben werden. Aber sie verleihen ihrer Schöpfung auch Komplexität. Wenn Sie den Status auf dem Server und den Client synchronisieren, auf dem Client und dem Server routet, das Laden von Daten vor dem Server -Rendering usw. sind einige der Dinge, die unsere Apps komplexer machen. Deshalb existieren Frameworks wie Next.js, um die meisten dieser Probleme zu lösen. Dinge wie Authentifizierung bleiben uns jedoch überlassen. Dies ist ein Versuch, die Authentifizierung basierend auf JWT zu implementieren. Die Sache ist, dass wir keine Token in LocalStorage aufbewahren können, wie wir es mit Spa tun würden.
Die Idee ist, Token vom Server auf dem Client zu empfangen, es in Cookies zu speichern. Wenn eine Seite auf dem Server rendert, können wir vom Cookie auf das Token zugreifen.
Der Benutzer sendet eine Auth -Anfrage vom Client. In der Antwort wird JWT empfangen und in Browser Cookies und Redux Store gespeichert. Anschließend hat der Benutzer Zugriff auf das Token vom Client und kann es verwenden, um auf geschützte Routen zuzugreifen.
Wenn der Benutzer eine Seitenanforderung stellt, werden auch Cookies mitgesandt, sodass der Server sie lesen kann. Um es zu lesen, verwendet der Benutzer die getInitialProps -Lebenszyklusmethode, bereitgestellt von Next.js. Es erhält ein Argument - das Kontextobjekt, das einige Eigenschaften enthält. Hier können Sie mehr darüber lesen. Auf der req -Immobilie können wir auf headers -Immobilien zugreifen, die den Keks mit dem Token enthält. Ein Action -Ersteller wird entsandt, um das Token im Redux -Store zu speichern, und die App hat jetzt wieder Zugriff auf das Token.
Stellen Sie sicher, dass Sie Knoten und NPM installiert haben.
Stellen Sie außerdem sicher, dass der API -Server ausgeführt wird.
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
