Bejelentkezés és Hitelesítés #

A következő leírásban azt fogjuk megtekinteni, hogy hogyan fog számunkra kinézni egy Vue.js alapú alkalmazásban a bejelentkezés Laravel alapú backenddel.

Bejelentkezési (Regisztrációs) űrlap #

Elkészítjük az űrlapot ami bekéri a felhasználótól a bejelentkezési adatokat. Ez szinte mindig csak az email címet (vagy felhasználónevet) és a jelszót fogja tartalmazni számunkra.

Ezt követően az űrlap elküldését fogjuk figyelni a @submit.prevent segítségével, ami megakadályozza az oldal újratöltését, miközben lefuttatja a bejelentkeztető függvényünket.

A függvényben a modeleken keresztül begyűjtött adatokat a saját axios példányunkkon keresztül fogjuk elküldeni a szervernek. A visszaértkező tokent eltároljuk helyi tárolóban. Ezt követően a useRouter() segítségével átirányítjuk a felhasználót a következő oldalra.

<template>
 <div class="bg-info bg-opacity-50 m-auto mt-5 w-50 p-3 rounded">
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="email">Ímélcím:</label>
        <input type="email" id="email" class="form-control" v-model="userData.email">
      </div>
      <div class="form-group mt-2">
        <label for="password">Jelszó:</label>
        <input type="password" class="form-control" v-model="userData.password">
      </div>
      <input type="submit" value="Bejelentkezés" class="btn btn-primary mt-3">
    </form>
  </div>
</template>
<script setup>
import {reactive,ref} from 'vue';
import {http} from '../../utils/http'
import {useRouter} from "vue-router";
const router = useRouter();
const userData = reactive({
  email: '',
  password: ''
});
const error = ref(null);
async function login(){
  const response = await http.post('login', userData);
  if(response.status !== 200){
    error.value = response.statusText
  }else{
    localStorage.setItem('token',response.data.data.token);
    router.push({name: 'index'});
  }
}
</script>

Axios beállítása #

Szükségünk lesz egy saját Axios példányra annak érdekében, hogy egységesen tudjuk kezelni a kommunikációt. Ezt úgy fogjuk előállítani, hogy a szokásos baseURL-en kívül lesz eg plusz fejlécünk is. Ennek az értékét még a példányon kívül állítjuk be, ugyanis, ha null értéket kap a fejléc, akkor nem kerül hozzáírásra. Ezt fogjuk kihasználni a hitelesítés meglétét vizsgáló token esetében.

Ha nem tároltuk el a token értékét, akkor a felhasználó nincs bejelnetkezve, így csak azokat az útvonalakat érheti majd el, amelyek nem kérnek hitelesítést.

Amenyiben pedig érvényes token van a helyi tárolóba, akkor hozzáfűzésre kerül a kéréshez.

import axios from 'axios';
const token = localStorage.getItem('token');
const bearer = token===null?null:`Bearer ${token}`;
export const http = axios.create({
    baseURL: 'http://localhost:8881/api',
    headers:{
        Authorization: bearer
    }
})

Router #

Laravelben #

Ha a két megoldást egybeépítve dolgozunk, akor figyeljünk rá, hogy a createWebHistory() helyett a createWebHashHistory()-t használjuk, annak érdekében, hogy a vue egy #-el ellássa az útvonalat azéltal kettéválasztva azt a laraveles routingtól.

export const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

Az oldalak meta tulajdonságai #

Az egyes útvonalak kialakításakor nem csak a path, name és a component adható meg, hanem az is, hogy milyen egyéb tulajdonságai lesznek amiket később fel lehet használni.

Például be kell-e jelentkezve lenni hozzá.

//...
// routes[]
{
  name: 'register',
  path: '/register',
  component: ()=>import("../pages/auth/RegisterPage.vue"),
  meta: {
    requiresAuth: false,
  }
},
{
  name: 'user',
  path: '/user',
  component: () => import('../pages/hidden/UserPage.vue'),
  meta: {
      requiresAuth: true,
  }
},
//...

Guard #

A következő feladat, hogy az előző metát, valamint a helyi tárolót felhasználva elkészítjünk egy olyan függvényt, amely eldönti, hogy továbbhaladhatunk-e a megadott útvonalon vagy sem.

Ezeket a függvényeket, amelyek az útvonalakat védik Guard-oknak hívjuk és a router könyvtárába fogjuk guards könyvetárban elhelyezni őket.

3 paraméter lesz amit tudunk kezelni:

1. to: hova megyünk, az útvonal minden adatával
2. from: honnan jöttünk, az útvonal minden adatával
3. next: az a függvény lesz ami elvégzi a routolást a megfelelő helyre

// /router/guards/AuthGuard.mjs
export function authGuard(to,from,next){
    if (!to.meta.requiresAuth) next()
    else {
        if (localStorage.getItem('token') === null) next({name: 'login'})
        else next()
    }
}

Amit itt elvégzünk, hogy megnézzük, hogy az útvonal engedi e belépés néélkül a megtekintést, ha engedi, akkor a next()-el továbbkülsjük a cél felé.

Ha nem engedi, akkor megvizsgáljuk, hogy van-e tárolt tokenünk. Ha nincs, akkor nem vagyunk belépve, innentől a következő állomás számunkra a bejelentkező oldal lesz. Ha van tokenünk, akkor sikeresen továbbléphet a felhasználó.

Alkalmazása #

Úgy fogjuk felhasználni ezt, hogy a router moduljába beimportálva odaadjuk a routernek, hogy ezt minden útvonal kezelése előtt futtassa le.

// /router/index.js
import { AuthGuard } from './guards/AuthGuard.js';
// ...
router.beforeEach(authGuard);

Ellenőrző kérdések #

\pagebreak