Besoin d'aide ?

Laravel 8 et VueJS - Utiliser son API

Avatar de Seeryos
Seeryos

Bonjour à tous,

J'utilise Laravel 8 avec Passport pour le côté API et je viens de mettre en place VueJS dessus pour rendre mon frontoffice plus réactif.

Dans routes/api.php j'ai plusieurs routes qui utilisent le middleware client pour dialoguer avec une application mobile. Jusque là tout va bien. Maintenant, sur mes Vue Components j'utilise Axios pour récupérer des données. Le souci de la quasi totalité des ressources en ligne que j'ai pu trouver nous suggère de créer des routes WEB sans sécurité pour nos requête en GET. Le problème est qu'au final n'importe qui pourra appeler notre API et récupèrer librement et super simplement les données comme c'est le cas sur de nombreux sites web.

De mon côté, j'aimerais utiliser mes routes d'API qui utilisent le middleware client afin de :

  1. Ne pas coder 10 fois la même chose
  2. Sécuriser l'ensemble

Là encore, j'ai trouvé des infos comme quoi il faut passer le client secret et tout ce qui va avec directement dans le Vue Component au niveau d'axios. Mais encore une fois il suffira d'inspecter le code source pour trouver les accès. C'est pas super.

Sur la Doc de Laravel 8 j'ai trouvé ceci : https://laravel.com/docs/8.x/passport#consuming-your-api-with-javascript

Le problème est qu'en mettant en place la petite ligne dans Kernel.php et même en changeant le middleware de ma route par auth:api, j'ai un code de retour 401 Unauthorized.

Pouvez-vous m'aider ?

Voici mon code source :

app/Http/Kernel.php

protected $middlewareGroups = [
        'web' => [
            ...
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
        ],
        'api' => [
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
];

routes/api.php

Route::middleware('auth:api')->get('/explorer', [TaskController::class, 'index']);

Dans l'idéal, il faudrait que je change auth:api par client au niveau du middleware.

TaskComponent.vue

<template>

    <div class="tasks">
        <div v-for='task in tasks' :key='task.id' class="task text-center">
            <a :href="'/task/'+task.id">{{ task.label }}</a>
        </div>
    </div>

</template>

<script>
	export default {

		data(){
			return {
				tasks : {}
			}
		},

		created(){
			axios.get('/api/explorer')
				.then(response => {
					this.tasks = response.data;
				})
				.catch(error => console.log(error));
		},
	};
</script>

Merci beaucoup pour votre aide !

Posté il y a 1 jour

Vous ne pouvez pas répondre à ce sujet.