So implementieren Sie die JWT-Authentifizierung in Vue/Nuxt-Anwendungen

Blog

Die Authentifizierung in SPAs ist oft ein heißes Thema, und noch mehr für diejenigen, die sich nicht sicher sind, welche Methode zur Implementierung eines Authentifizierungssystems mit allen erforderlichen Funktionen und den häufigsten Randfällen am besten geeignet ist.

http www netflix com aktivieren

Obwohl wir das Schreiben des Backends nicht behandeln werden JWT oder Authentifizierungsimplementierung gibt es verschiedene Artikel, die je nach Bedarf die besten Methoden für verschiedene Sprachen und Frameworks beschreiben. Unabhängig von Ihrer Wahl sollten Sie sicherstellen, dass Sie die drei Kernfunktionen implementieren, die für das Frontend erforderlich sind – Registrierung, Anmeldung und Aktualisierung des Zugriffstokens über Token aktualisieren . Wir werden eine grundlegende Implementierung einiger dieser Endpunkte besprechen, aber sie sind immer noch völlig flexibel. Es wird auch davon ausgegangen, dass Sie bereits eine grundlegende Nuxt-Anwendung im universellen Rendering-Modus eingerichtet haben.

Einstieg

Für das Frontend verwenden wir drei wesentliche Pakete — vuex-persistedstate , js-Cookie und @ nuxtjs / axios . Die erste ermöglicht es uns, den Nuxt-Modulstatus in einem Speicher unserer Wahl (Cookies!) von beiden Enden. Das zweite erleichtert das Parsen von Cookies, während das letzte ein allgemeines Nuxt-Paket ist, das ein All-Inclusive-Paket für HTTP-Aufrufe bereitstellt.

Beginnen wir damit, diese zu installieren.

npm install --save vuex-persistedstate js-cookie @nuxtjs/axios

VueX State Persistenz

Um authentifizierte API-Aufrufe sowohl vom Server als auch vom Browser (Client) durchzuführen, müssen wir sicherstellen, dass die Token von beiden Enden zugänglich sind. vuex-persistedstate vereinfacht dies und wird mit Hilfe von js-cookie die Token zu einem Cookie persistieren.

Nach der Installation der Pakete müssen wir den vuex-persistedstate mit einem Plugin konfigurieren.

// plugins/local-storage.js import createPersistedState from 'vuex-persistedstate' import * as Cookies from 'js-cookie' import cookie from 'cookie' // access the store, http request and environment from the Nuxt context // https://nuxtjs.org/api/context/ export default ({ store, req, isDev }) => { createPersistedState({ key: 'authentication-cookie', // choose any name for your cookie paths: [ // persist the access_token and refresh_token values from the 'auth' store module 'auth.access_token', 'auth.refresh_token', ], storage: { // if on the browser, parse the cookies using js-cookie otherwise parse from the raw http request getItem: key => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie || '')[key], // js-cookie can handle setting both client-side and server-side cookies with one method // use isDev to determine if the cookies is accessible via https only (i.e. localhost likely won't be using https) setItem: (key, value) => Cookies.set(key, value, { expires: 14, secure: !isDev }), // also allow js-cookie to handle removing cookies removeItem: key => Cookies.remove(key) } })(store) }

plugins/local-storage.js — Konfiguration von vuex-persistedstate

Vergiss nicht, dieses Plugin zu deiner nuxt.config.js hinzuzufügen!

plugins: [ '~/plugins/local-storage', ],

VueX-Store

Wir müssen auch den VueX-Speicher einrichten, in dem wir Daten über den Benutzer, das Zugriffstoken und das Aktualisierungstoken speichern. Wir müssen auch Aktionen zum Ausführen von API-Aufrufen zum Registrieren, Anmelden und Aktualisieren eines Benutzers sowie Mutationen einbeziehen, um die zurückgegebenen Daten an den Status zu übergeben.

Obwohl die Struktur leicht zu ändern ist, sollten Sie am Ende so etwas haben…

// store/auth.js // reusable aliases for mutations export const AUTH_MUTATIONS = { SET_USER: 'SET_USER', SET_PAYLOAD: 'SET_PAYLOAD', LOGOUT: 'LOGOUT', } export const state = () => ({ access_token: null, // JWT access token refresh_token: null, // JWT refresh token id: null, // user id email_address: null, // user email address }) export const mutations = { // store the logged in user in the state [AUTH_MUTATIONS.SET_USER] (state, { id, email_address }) { state.id = id state.email_address = email_address }, // store new or updated token fields in the state [AUTH_MUTATIONS.SET_PAYLOAD] (state, { access_token, refresh_token = null }) { state.access_token = access_token // refresh token is optional, only set it if present if (refresh_token) { state.refresh_token = refresh_token } }, // clear our the state, essentially logging out the user [AUTH_MUTATIONS.LOGOUT] (state) { state.id = null state.email_address = null state.access_token = null state.refresh_token = null }, } export const actions = { async login ({ commit, dispatch }, { email_address, password }) { // make an API call to login the user with an email address and password const { data: { data: { user, payload } } } = await this.$axios.post( '/api/auth/login', { email_address, password } ) // commit the user and tokens to the state commit(AUTH_MUTATIONS.SET_USER, user) commit(AUTH_MUTATIONS.SET_PAYLOAD, payload) }, async register ({ commit }, { email_addr, password }) { // make an API call to register the user const { data: { data: { user, payload } } } = await this.$axios.post( '/api/auth/register', { email_address, password } ) // commit the user and tokens to the state commit(AUTH_MUTATIONS.SET_USER, user) commit(AUTH_MUTATIONS.SET_PAYLOAD, payload) }, // given the current refresh token, refresh the user's access token to prevent expiry async refresh ({ commit, state }) { const { refresh_token } = state // make an API call using the refresh token to generate a new access token const { data: { data: { payload } } } = await this.$axios.post( '/api/auth/refresh', { refresh_token } ) commit(AUTH_MUTATIONS.SET_PAYLOAD, payload) }, // logout the user logout ({ commit, state }) { commit(AUTH_MUTATIONS.LOGOUT) }, } export const getters = { // determine if the user is authenticated based on the presence of the access token isAuthenticated: (state) => { return state.access_token && state.access_token !== '' }, }

store/auth.js — die wesentliche Implementierung des Auth-Store-Moduls

Nachdem wir nun einen Status eingerichtet haben, müssen Sie Formularkomponenten für die Anmelde- und Registrierungsseiten erstellen, die hier ebenfalls nicht behandelt werden. Im Wesentlichen sollten Ihre Formulare die Aktionen des Authentifizierungsmoduls aufrufen, um sich anzumelden oder den Benutzer zu registrieren.

const email_address = 'me@example.com' const password = 'abc123' await $store.dispatch('auth/login', { email_address, password })

Ein Beispiel-Anmelde-API-Aufruf

Mit dem Status und den Formularen und der Möglichkeit, Benutzer zu authentifizieren, können wir authentifizierte API-Anfragen implementieren!

#jwt #vue #nuxt #sicherheit #javascript

medium.com

So implementieren Sie die JWT-Authentifizierung in Vue/Nuxt-Anwendungen

Erfahren Sie, wie Sie die JWT-Authentifizierung in Vue/Nuxt-Anwendungen implementieren. JSON Web Token (JWT) ist ein offener Standard, der einen kompakten und in sich geschlossenen Weg für die sichere Übertragung von Informationen zwischen Parteien als JSON-Objekt definiert. Die Authentifizierung in SPAs ist oft ein heißes Thema, und noch mehr für diejenigen, die sich nicht sicher sind, welche Methode zur Implementierung eines Authentifizierungssystems mit allen erforderlichen Funktionen und den häufigsten Randfällen am besten geeignet ist.