Vuex: implementazione e autenticazione degli utenti

Nella quarta lezione del nostro percorso di sviluppo con Laravel e Vue.js, ci concentreremo su funzionalità avanzate per migliorare la nostra Todo List. Questa lezione ci porterà a esplorare l'utilizzo di Vuex per gestire lo stato globale dell'applicazione e l'implementazione dell'autenticazione degli utenti per garantire sicurezza e personalizzazione della UX.

Dopo aver stabilito le basi nelle prime tre lezioni, dove abbiamo integrato Vue.js in un progetto Laravel utilizzando Vite e configurato il nostro ambiente di sviluppo, siamo ora pronti a portare il nostro progetto al livello successivo. Finora abbiamo creato le rotte API necessarie per gestire le operazioni CRUD (Create, Read, Update, Delete) della nostra Todo List, interagendo con il database e costruendo una ricca interfaccia utente con Vue.jsS.

Abbiamo visto come queste tecnologie possano essere combinate per creare un'applicazione web completa e funzionale. Oggi rafforzeremo ulteriormente queste conoscenze con l'introduzione di Vuex e l'autenticazione degli utenti.

Configurazione di Vuex

Vuex è un sistema di gestione dello stato per Vue.js, che ci permette di mantenere sincronizzati i dati tra i vari componenti dell'applicazione. Questo è particolarmente utile per applicazioni complesse come la nostra Todo List, dove diverse parti dell'interfaccia possono avere bisogno di accedere e modificare lo stesso set di dati. Per iniziare, dobbiamo installare Vuex nel nostro progetto. Utilizzando npm, possiamo facilmente aggiungere Vuex alle nostre dipendenze:

npm install vuex --save

Una volta installato creeremo uno store Vuex che conterrà lo stato delle nostre attività e definirà le mutazioni e le azioni necessarie per aggiornare tale stato. Nel file resources/js/store/index.js, configureremo il nostro store Vuex. Questo file conterrà la logica per impostare lo stato iniziale delle attività, aggiornare lo stato quando nuove attività vengono aggiunte, modificate o eliminate e per recuperare le attività dal server.

<script type="module">
  import { createStore } from 'vuex';
  const store = createStore({
    state() {
      return {
        tasks: [],
      };
    },
    mutations: {
      setTasks(state, tasks) {
        state.tasks = tasks;
      },
      addTask(state, task) {
        state.tasks.push(task);
      },
      updateTask(state, updatedTask) {
        const index = state.tasks.findIndex(task => task.id === updatedTask.id);
        if (index !== -1) {
          state.tasks.splice(index, 1, updatedTask);
        }
      },
      deleteTask(state, taskId) {
        state.tasks = state.tasks.filter(task => task.id !== taskId);
      },
    },
    actions: {
      fetchTasks({ commit }) {
        axios.get('/api/tasks')
          .then(response => {
            commit('setTasks', response.data);
          });
      },
      createTask({ commit }, task) {
        axios.post('/api/tasks', task)
          .then(response => {
            commit('addTask', response.data);
          });
      },
      editTask({ commit }, task) {
        axios.put(`/api/tasks/${task.id}`, task)
          .then(response => {
            commit('updateTask', response.data);
          });
      },
      removeTask({ commit }, taskId) {
        axios.delete(`/api/tasks/${taskId}`)
          .then(() => {
            commit('deleteTask', taskId);
          });
      },
    },
  });
  export default store;
</script>

Integrazione di Vuex nell'applicazione

Una volta configurato lo store Vuex, dobbiamo integrarlo nel nostro progetto Vue.js. Nel file resources/js/app.js importiamo lo store e aggiungiamolo alla nostra applicazione Vue.

<script type="module">
  import { createApp } from 'vue';
  import App from './components/App.vue';
  import store from './store';
  createApp(App)
    .use(store)
    .mount('#app');
</script>

Ora possiamo utilizzare lo store Vuex nei componenti Vue per gestire lo stato delle attività. Nel componente principale App.vue possiamo connettere lo store Vuex e utilizzare le azioni definite per recuperare, aggiungere, modificare ed eliminare attività.

<div id="app">
    <h1>Todo List</h1>
</div>
<script type="module">
  import TaskList from './TaskList.vue';
  export default {
    components: {
      TaskList,
    },
  };
</script>

Nel componente TaskList.vue utilizziamo le azioni Vuex per interagire con il backend e aggiornare lo stato delle attività.

<div>
  <ul>
    <li>
      {{ task.title }}
      <button>Delete</button>
    </li>
  </ul>
</div>
<script type="module">
  import { mapState, mapActions } from 'vuex';
  export default {
    computed: {
      ...mapState(['tasks']),
    },
    methods: {
      ...mapActions(['fetchTasks', 'removeTask']),
    },
    mounted() {
      this.fetchTasks();
    },
  };
</script>

Autenticazione degli utenti

Per rendere la nostra applicazione più sicura aggiungeremo ora l'autenticazione degli utenti. Laravel fornisce un sistema di autenticazione robusto e facile da implementare. Iniziamo installando Laravel Breeze, un pacchetto leggero per l'autenticazione.

composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate

Una volta installato, Laravel Breeze ci fornirà tutte le rotte, i controller e le viste necessari per la registrazione, il login e la gestione delle sessioni utente. Possiamo personalizzare queste risorse per adattarle alle esigenze della nostra applicazione.

Il sistema di autenticazione

Con Laravel Breeze configurato possiamo proteggere le rotte API. Modifichiamo il file api.php per richiedere l'autenticazione sulle rotte delle attività.

<?php
Route::middleware('auth:sanctum')->group(function () {
    Route::get('/tasks', [TaskController::class, 'index']);
    Route::post('/tasks', [TaskController::class, 'store']);
    Route::get('/tasks/{id}', [TaskController::class, 'show']);
    Route::put('/tasks/{id}', [TaskController::class, 'update']);
    Route::delete('/tasks/{id}', [TaskController::class, 'destroy']);
});
?>

Questa modifica assicura che solo gli utenti autenticati possano accedere e manipolare le attività. Ora, quando un utente tenta di accedere a queste rotte senza autenticarsi, verrà reindirizzato alla pagina di login.

Configurazione del frontend per l'autenticazione

Nel frontend possiamo aggiungere funzionalità di autenticazione utilizzando Vue.js. Creiamo componenti per il login e la registrazione degli utenti. In resources/js/components creiamo Login.vue e Register.vue.

Login.vue

<div>
    <h2>Login</h2>
      <button type="submit">Login</button>
  </div>
export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    login() {
      axios.post('/login', {
        email: this.email,
        password: this.password,
      })
      .then(response => {
        // Handle success
      })
      .catch(error => {
        // Handle error
      });
    },
  },
};

Register.vue

<div>
  <h2>Register</h2>
    <button type="submit">Register</button>
</div>
<script type="module">
  export default {
    data() {
      return {
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
      };
    },
    methods: {
      register() {
        axios.post('/register', {
          name: this.name,
          email: this.email,
          password: this.password,
          password_confirmation: this.password_confirmation,
        })
        .then(response => {
          // Handle success
        })
        .catch(error => {
          // Handle error
        });
      },
    },
  };
</script>

Protezione delle rotte nel frontend

Innanzitutto, creiamo il file resources/js/router/index.js. Utilizzando Vue Router, possiamo proteggere le rotte del frontend per assicurarci che solo gli utenti autenticati possano accedere a determinate pagine. Modifichiamo il nostro router per includere la protezione delle rotte.

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import TaskList from '../components/TaskList.vue';
const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  {
    path: '/tasks',
    component: TaskList,
    meta: { requiresAuth: true }
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!localStorage.getItem('auth')) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});
export default router;

Integrazione del router nell'applicazione

Dopo aver configurato il router dobbiamo integrarlo nella nostra applicazione Vue. Apriamo il file principale app.js e aggiungiamo il router all'istanza Vue.

<script type="module">
  import './bootstrap';
  import '../css/app.css';
  import { createApp, h } from 'vue';
  import { createInertiaApp } from '@inertiajs/vue3';
  import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
  import { ZiggyVue } from '../../vendor/tightenco/ziggy';
  import router from './router'; // Importa il router
  import store from './store'; // Importa lo store
  const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
      resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
      setup({ el, App, props, plugin }) {
          return createApp({ render: () => h(App, props) })
              .use(plugin)
              .use(ZiggyVue)
              .use(router) // Usa il router
              .use(store) // Usa lo store
              .mount(el);
      },
      progress: {
          color: '#4B5563',
      },
  });
</script>

Testing dell'Applicazione

Dopo aver configurato e integrato Vue Router, è importante testare l'applicazione per assicurarsi che tutto funzioni correttamente. Avviamo il server di sviluppo di Laravel e compiliamo i nostri asset Vue.js:

php artisan serve
npm run dev

Aprimo poi il browser e navighiamo all'indirizzo http://localhost:8000. Testiamo la registrazione, il login e l'accesso alle pagine protette per verificare che il sistema di autenticazione e la protezione delle rotte funzionino come previsto.

Conclusione

In questa lezione, abbiamo integrato il router di Vue e Vuex nel nostro progetto, aggiungendo funzionalità di autenticazione e protezione delle rotte. Ora abbiamo una base solida per costruire applicazioni web dinamiche e reattive utilizzando Laravel e Vue.js.