Vue.js ile Route Guard ve Yetkilendirme: Kullanıcı Rolüne Göre Sayfa Erişimi

Modern SPA’lerde (Single Page App) en kritik konulardan biri sayfa erişimini doğru yönetmek. Vue tarafında bunun temel aracı Vue Router route guard yapısıdır. Bu yazıda; giriş kontrolü (auth) ve rol bazlı yetkilendirme (authorization) kurgusunu sade, uygulanabilir bir örnekle kuracağız.

Not: Örnek Vue 3 + Vue Router 4 mantığına göredir.

1) Hedef Mimari

• Kullanıcı bilgisi (token + rol) localStorage’da tutulur (demo amaçlı).
• Route meta alanlarında:
  • requiresAuth: oturum gerektirir
  • roles: erişebilecek roller
• Global beforeEach guard ile:
  • giriş yoksa /login’e yönlendir
  • rol yetmiyorsa /forbidden’a yönlendir

2) Basit Auth Store (Minimal)

Gerçekte Pinia/Vuex tercih edebilirsiniz; burada anlaşılır olması için minimal bir yardımcı yazalım.

// src/auth.js
export function getSession() {
  const raw = localStorage.getItem('session')
  return raw ? JSON.parse(raw) : null
}

export function setSession(session) {
  localStorage.setItem('session', JSON.stringify(session))
}

export function clearSession() {
  localStorage.removeItem('session')
}

export function isLoggedIn() {
  const s = getSession()
  return Boolean(s?.token)
}

export function hasRole(allowedRoles = []) {
  if (!allowedRoles.length) return true
  const s = getSession()
  return allowedRoles.includes(s?.role)
}

3) Router Tanımı: Meta ile Kural Yaz

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { isLoggedIn, hasRole } from '@/auth'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/LoginView.vue')
  },
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/AdminView.vue'),
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/reports',
    name: 'reports',
    component: () => import('@/views/ReportsView.vue'),
    meta: { requiresAuth: true, roles: ['admin', 'analyst'] }
  },
  {
    path: '/forbidden',
    name: 'forbidden',
    component: () => import('@/views/ForbiddenView.vue')
  }
]

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

router.beforeEach((to) => {
  const requiresAuth = to.matched.some(r => r.meta.requiresAuth)
  const roles = to.meta.roles || []

  if (requiresAuth && !isLoggedIn()) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }

  if (requiresAuth && !hasRole(roles)) {
    return { name: 'forbidden' }
  }

  return true
})

export default router

Bu yaklaşımın artısı: Yetkilendirme kurallarını route tanımının yanında görürsünüz.

4) Login Ekranı: Redirect Mantığı

Kullanıcı login olduktan sonra, geldiği sayfaya dönmek iyi bir UX’tir.

<!-- src/views/LoginView.vue -->
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { setSession } from '@/auth'

const route = useRoute()
const router = useRouter()

function loginAs(role) {
  // Demo: normalde API'den token alınır
  setSession({ token: 'demo-token', role })
  const redirect = route.query.redirect || '/'
  router.replace(String(redirect))
}
</script>

<template>
  <main>
    <h1>Login</h1>
    <button @click="loginAs('admin')">Admin olarak giriş</button>
    <button @click="loginAs('analyst')">Analyst olarak giriş</button>
    <button @click="loginAs('user')">User olarak giriş</button>
  </main>
</template>

5) İnce Ayar Önerileri

• Token doğrulama: Gerçekte token süresi dolabilir. Guard içinde “hafif” kontrol yapıp gerektiğinde API ile yenileme (refresh) akışı kurun.
• Yetki matrisi: Proje büyüyorsa roles yerine permissions (örn. can:view_reports) daha sürdürülebilir olur.
• UI tarafı: Menü linklerini de role göre gizleyin; ancak asıl güvenlik her zaman guard (ve backend) tarafında olmalı.

Sonuç

Vue Router meta alanları + global guard ile oturum kontrolünü ve rol bazlı erişimi temiz bir şekilde yönetebilirsiniz. Bu temel yapı, Pinia entegrasyonu ve API tabanlı token yenileme ile kolayca üretim seviyesine taşınır.