{"id":34632,"date":"2025-11-20T01:01:05","date_gmt":"2025-11-19T22:01:05","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/nuxt-middleware-nedir-ve-neden-hayat-kurtarir\/"},"modified":"2025-11-20T01:01:05","modified_gmt":"2025-11-19T22:01:05","slug":"nuxt-middleware-nedir-ve-neden-hayat-kurtarir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/nuxt-middleware-nedir-ve-neden-hayat-kurtarir\/","title":{"rendered":"Nuxt Middleware Nedir ve Neden Hayat Kurtar\u0131r?"},"content":{"rendered":"

Nuxt Uygulamalar\u0131n\u0131zda Middleware G\u00fcc\u00fc: Rotay\u0131 Y\u00f6netmek<\/p>\n

Nuxt.js uygulamalar\u0131nda rota ge\u00e7i\u015flerini nas\u0131l ele alaca\u011f\u0131n\u0131z\u0131, kullan\u0131c\u0131 yetkilendirmeyi ve oturum y\u00f6netimini middleware ile nas\u0131l kolayla\u015ft\u0131raca\u011f\u0131n\u0131z\u0131 merak ediyor musunuz? Bu makale, Nuxt Middleware’in temelden ileri seviyeye t\u00fcm y\u00f6nlerini pratik \u00f6rneklerle a\u00e7\u0131klayarak, Nuxt uygulamalar\u0131n\u0131zda kontrol\u00fc ele alman\u0131z\u0131 sa\u011flayacak.<\/p>\n

Web geli\u015ftirmenin dinamik d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve uygulama g\u00fcvenli\u011fini sa\u011flamak i\u00e7in s\u00fcrekli yeni yakla\u015f\u0131mlar aramaktay\u0131z. Modern web uygulamalar\u0131nda kullan\u0131c\u0131 kimlik do\u011frulamas\u0131, yetkilendirme, dil tespiti veya belirli bir kullan\u0131c\u0131n\u0131n belirli bir sayfaya eri\u015fimini kontrol etmek gibi i\u015flemler olduk\u00e7a yayg\u0131nd\u0131r. Bu t\u00fcr mant\u0131ksal denetimler, genellikle bir kullan\u0131c\u0131 bir sayfaya eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, yani bir rota ge\u00e7i\u015fi s\u0131ras\u0131nda ger\u00e7ekle\u015fir. \u0130\u015fte tam bu noktada Nuxt Middleware devreye girer ve hayat kurtaran bir ara\u00e7 haline gelir. Middleware, Nuxt.js uygulamalar\u0131nda bir rota y\u00fcklenmeden \u00f6nce veya y\u00fcklendikten sonra \u00e7al\u0131\u015ft\u0131r\u0131lan \u00f6zel fonksiyonlard\u0131r. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, “ara katman” i\u015flevi g\u00f6rerek, istemci iste\u011fi ile sunucu yan\u0131t\u0131 aras\u0131na girer ve gerekli mant\u0131ksal kontrolleri veya veri manip\u00fclasyonlar\u0131n\u0131 yapar.<\/p>\n

Bir Nuxt uygulamas\u0131nda, kullan\u0131c\u0131 bir sayfaya gitmek istedi\u011finde, bu istek Nuxt’\u0131n dahili y\u00f6nlendirme (routing) sisteminden ge\u00e7er. Middleware, bu y\u00f6nlendirme ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn belirli a\u015famalar\u0131na m\u00fcdahale etmenizi sa\u011flar. Bu m\u00fcdahale sayesinde, \u00f6rne\u011fin bir kullan\u0131c\u0131n\u0131n oturum a\u00e7\u0131p a\u00e7mad\u0131\u011f\u0131n\u0131 kontrol edebilir, belirli bir role sahip olup olmad\u0131\u011f\u0131n\u0131 do\u011frulayabilir veya belirli bir dil parametresi yoksa varsay\u0131lan bir dil atayabilirsiniz. T\u00fcm bu i\u015flemleri, ilgili sayfa bile\u015feninin kendi i\u00e7inde tekrarlamak yerine, merkezi bir noktada tan\u0131mlayarak kod tekrar\u0131n\u0131 \u00f6nler ve uygulaman\u0131z\u0131n daha mod\u00fcler, okunabilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flars\u0131n\u0131z. Ger\u00e7ek d\u00fcnya senaryosunda, d\u00fc\u015f\u00fcn\u00fcn ki bir e-ticaret siteniz var. Kullan\u0131c\u0131lar, “sepetim” sayfas\u0131na sadece oturum a\u00e7m\u0131\u015flarsa eri\u015febilmelidir. Ya da “y\u00f6netici paneli” sayfas\u0131na yaln\u0131zca “admin” rol\u00fcne sahip kullan\u0131c\u0131lar girebilmelidir. Bu t\u00fcr kontrolleri her sayfan\u0131n mounted<\/code> veya created<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131nda tek tek yapmak yerine, bunlar\u0131 Nuxt Middleware olarak tan\u0131mlamak, kodunuzu \u00e7ok daha temiz ve s\u00fcrd\u00fcr\u00fclebilir hale getirir. Herhangi bir g\u00fcvenlik a\u00e7\u0131\u011f\u0131n\u0131 \u00f6nlemek i\u00e7in merkezi bir do\u011frulama mekanizmas\u0131 kurmak, geli\u015ftirme s\u00fcrecinde zaman kazand\u0131r\u0131rken, ayn\u0131 zamanda uygulaman\u0131n genel g\u00fcvenli\u011fini de art\u0131r\u0131r. Dolay\u0131s\u0131yla, Nuxt Middleware sadece bir kod d\u00fczenleme arac\u0131 de\u011fil, ayn\u0131 zamanda uygulama mant\u0131\u011f\u0131n\u0131z\u0131 daha g\u00fcvenli ve verimli bir \u015fekilde uygulaman\u0131z\u0131 sa\u011flayan stratejik bir bile\u015fendir.<\/p>\n

Nuxt.js’te Middleware \u00c7e\u015fitleri Nelerdir ve Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n

Nuxt.js, geli\u015ftiricilere esneklik sa\u011flamak amac\u0131yla farkl\u0131 middleware kullan\u0131m senaryolar\u0131 sunar. Bu senaryolar, uygulaman\u0131z\u0131n genelinde ge\u00e7erli olacak kurallardan, belirli bir sayfan\u0131n \u00f6zel ihtiya\u00e7lar\u0131na y\u00f6nelik kontrollere kadar geni\u015f bir yelpazeyi kapsar. Her bir middleware t\u00fcr\u00fcn\u00fcn kendi kullan\u0131m amac\u0131 ve uygulama y\u00f6ntemi bulunur, bu da geli\u015ftiricilerin do\u011fru arac\u0131 do\u011fru yerde kullanmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. \u015eimdi bu \u00e7e\u015fitleri ve nas\u0131l uyguland\u0131klar\u0131n\u0131 ad\u0131m ad\u0131m inceleyelim.<\/p>\n

Global Middleware: Her Rota \u0130\u00e7in Ortak Kurallar Nas\u0131l Belirlenir?<\/h3>\n

Global middleware’ler, Nuxt uygulaman\u0131zdaki her rota ge\u00e7i\u015finde, yani her sayfa y\u00fcklemesinde otomatik olarak \u00e7al\u0131\u015fan fonksiyonlard\u0131r. Bu t\u00fcr middleware’ler, uygulaman\u0131z\u0131n genelinde ge\u00e7erli olmas\u0131 gereken mant\u0131ksal kontroller i\u00e7in idealdir. \u00d6rne\u011fin, t\u00fcm kullan\u0131c\u0131lar\u0131n oturum durumunu kontrol etmek, dil tercihini belirlemek veya belirli bir bak\u0131m modunda olup olmad\u0131\u011f\u0131n\u0131z\u0131 denetlemek gibi senaryolarda global middleware harika bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n

Global middleware tan\u0131mlamak i\u00e7in \u00f6ncelikle projenizin k\u00f6k dizininde middleware\/<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturman\u0131z gerekir. Ard\u0131ndan, bu klas\u00f6r\u00fcn i\u00e7ine bir JavaScript dosyas\u0131 (\u00f6rne\u011fin, auth.js<\/code> veya locale.js<\/code>) yerle\u015ftirirsiniz. Bu dosyan\u0131n i\u00e7inde, context<\/code> objesini parametre olarak alan bir fonksiyonu varsay\u0131lan (default<\/code>) olarak d\u0131\u015fa aktar\u0131rs\u0131n\u0131z. context<\/code> objesi, Nuxt’\u0131n ge\u00e7erli istek hakk\u0131ndaki t\u00fcm \u00f6nemli bilgileri (store, app, redirect, route, req, res vb.) i\u00e7erir ve middleware i\u00e7inde bu bilgilere eri\u015ferek \u00e7e\u015fitli i\u015flemler yapman\u0131z\u0131 sa\u011flar.<\/p>\n

\/\/ middleware\/auth.js\nexport default function ({ store, redirect, route }) {\n  \/\/ E\u011fer kullan\u0131c\u0131 giri\u015f yapmam\u0131\u015fsa\n  if (!store.state.auth.loggedIn) {\n    \/\/ ve mevcut rota \"login\" veya \"register\" de\u011filse\n    if (route.name !== 'login' && route.name !== 'register') {\n      \/\/ Kullan\u0131c\u0131y\u0131 giri\u015f sayfas\u0131na y\u00f6nlendir\n      return redirect('\/login');\n    }\n  } else {\n    \/\/ E\u011fer kullan\u0131c\u0131 giri\u015f yapm\u0131\u015fsa\n    \/\/ ve mevcut rota \"login\" veya \"register\" ise\n    if (route.name === 'login' || route.name === 'register') {\n      \/\/ Kullan\u0131c\u0131y\u0131 anasayfaya veya profil sayfas\u0131na y\u00f6nlendir\n      return redirect('\/');\n    }\n  }\n}<\/pre>\n
<\/code><\/p>\n
Bu auth.js<\/code> middleware'i, kullan\u0131c\u0131 oturum durumunu kontrol eder ve duruma g\u00f6re y\u00f6nlendirmeler yapar. Peki, Nuxt'a bu middleware'in global olarak \u00e7al\u0131\u015fmas\u0131 gerekti\u011fini nas\u0131l s\u00f6yleriz? Bunun i\u00e7in nuxt.config.js<\/code> dosyan\u0131zda router.middleware<\/code> \u00f6zelli\u011fini kullanman\u0131z gerekir:<\/p>\n
\/\/ nuxt.config.js\nexport default {\n  \/\/ ... di\u011fer yap\u0131land\u0131rmalar\u0131n\u0131z\n  router: {\n    middleware: ['auth'] \/\/ 'auth' middleware'ini global olarak kaydet\n  },\n  \/\/ ...\n}<\/pre>\n
<\/code><\/p>\n
Bu yap\u0131land\u0131rma ile, Nuxt uygulaman\u0131zda her rota ge\u00e7i\u015finde auth.js<\/code> i\u00e7indeki fonksiyon otomatik olarak \u00e7al\u0131\u015ft\u0131r\u0131lacakt\u0131r. Bu, uygulaman\u0131z\u0131n t\u00fcm sayfalar\u0131nda tutarl\u0131 bir oturum kontrol\u00fc sa\u011flamak i\u00e7in olduk\u00e7a etkili bir y\u00f6ntemdir. Ayr\u0131ca, birden fazla global middleware'iniz varsa, bunlar\u0131 bir dizi i\u00e7inde s\u0131ralayabilirsiniz; Nuxt, bunlar\u0131 tan\u0131mlad\u0131\u011f\u0131n\u0131z s\u0131raya g\u00f6re \u00e7al\u0131\u015ft\u0131racakt\u0131r. \u00d6rne\u011fin: middleware: ['auth', 'locale']<\/code>. Bu sayede, uygulaman\u0131z\u0131n her noktas\u0131nda g\u00fcvenli ve tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sunabilirsiniz.<\/p>\n
Rota (Named) Middleware: Belirli Sayfalar \u0130\u00e7in \u00d6zel Kontroller Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n
Global middleware'ler her rota i\u00e7in ge\u00e7erli genel kurallar belirlerken, bazen uygulaman\u0131zda yaln\u0131zca belirli sayfalara \u00f6zg\u00fc kontroller yapman\u0131z gerekebilir. \u0130\u015fte bu noktada rota tabanl\u0131 (named) middleware'ler devreye girer. Bu middleware'ler, sadece kendilerine atand\u0131\u011f\u0131 sayfa veya layout'lar i\u00e7in \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve b\u00f6ylece daha gran\u00fcler kontrol imkan\u0131 sunar.<\/p>\n
Rota middleware'i tan\u0131mlamak i\u00e7in yine middleware\/<\/code> klas\u00f6r\u00fcn\u00fc kullan\u0131r\u0131z. \u00d6rne\u011fin, yaln\u0131zca y\u00f6neticilerin eri\u015febilece\u011fi bir sayfa i\u00e7in admin-only.js<\/code> ad\u0131nda bir middleware olu\u015fturabiliriz:<\/p>\n
\/\/ middleware\/admin-only.js\nexport default function ({ store, redirect }) {\n  \/\/ Kullan\u0131c\u0131n\u0131n y\u00f6netici rol\u00fcnde olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n  if (!store.state.user || store.state.user.role !== 'admin') {\n    \/\/ E\u011fer de\u011filse, anasayfaya veya yetkisiz eri\u015fim sayfas\u0131na y\u00f6nlendir\n    return redirect('\/');\n  }\n}<\/pre>\n
<\/code><\/p>\n
Bu middleware'i bir sayfaya atamak i\u00e7in, ilgili sayfa bile\u015feninin middleware<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z. \u00d6rne\u011fin, pages\/admin\/dashboard.vue<\/code> sayfas\u0131 i\u00e7in:<\/p>\n
\n