Merhabalar bugün sizlere Laravel konusunda ufak bir anektod dilim döndüğünce anlatmak istedim, Laravel axios api rotasını kullanmak nasıl oluyor, ne yapacağız kısa kısa geçmeye çalışacağım.
axios nedir?
Axios , harika bir http client kütüphanesidir. Hem sunucu hemde client bazlı çalışmaktadır. Vue ile kullanımı da oldukça kolaydır.
Laravel axios api rotasını kullanmak
Günden güne Laravel ile beraber kendi bünyesinde eklediği ve geliştirdiği kütüphanelere Vue ekledi. Bu kısımda jquery post / get işlemleri yerine biraz daha Vue kısmında tercih edilen axios kütüphanesini kullanabilirsiniz.
Laravel rota mantığını geliştirdikçe daha güzel gelmeye başladı, api kısımları için api.php rota dosyasını kullanarak post işlemlerini ” session işlemleri hariç 🙂 ” bu kısımları kullanmanızı öneririm. Hem web rotasında gereksiz görünmez hemde backend kısmında çalışan kısımları burada toplayabilirsiniz.
Laravel jquery / axios kütüphanelerini kullanırak sayfası post etmeden direk olarak istek attığınız zaman token veya {“error”:”Unauthenticated.”} hataları alabilmektesiniz. Bunun sebebi laravel güvenlik önlemi olarak düşünebilirsiniz.
Burada dikkat etmek istediğim bir konu var, laravel projelerinde session bilgilerini kopyala / yapıştır yaparak farklı bir kullanıcının hesabına erişim sağlamayı denemişliğimde var. Sonuç : deneyerek görmeniz en iyisidir 🙂
Bu kısımda meta kısmına bir token anahtar oluşturarak rotamıza istek atarak bu sorunu jquery kısmında çözebiliyoruz, peki ya vue projelerinde axios ile bu sorunu nasıl aşabiliyoruz, elbetteki aynı yöntemi kullanıyoruz app.js dosyanızın içine
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}ekleyerek bu kısmıda çözebiliyoruz. Peki api.php rota dosyanızda auth:api kısmını aktif ettiğinizde bu şekilde çözüm işinize yarayacakmı ? Tabiki de hayır…
Çözüm Nedir ?
Burada devreye tekrar api.js dosyanız dahil bir kaç ekleme ve değiştirme yapmanız devreye giriyor.
- app.js dosyanızda yapacağınız değişiklik
let api_token = document.head.querySelector('meta[name="api-token"]');
if (api_token) {
window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + api_token.content;
}2. config/auth.php
'guards' => [
'web' => [
'driver' => 'authguard',
'provider' => 'users',
],
'api' => [
'driver' => 'token',
'provider' => 'users'
],
],3. head kısmına api-token ekleme
<meta name="csrf-token" content="{{ csrf_token() }}">
@if (auth()->check())
<meta name="api-token" content="{{ auth()->user()->api_token }}">
@endif
kısımlarını eklemeniz yeterlidir, bu kısımda en önemli husus laravel api kısmını okumanızı öneririm.
