05 May 2026 vue

Cara Membuat Middleware di Vue Router

Middleware di router adalah fungsi yang otomatis dipanggil ketika suatu route/halaman hendak diakses.

Middleware biasa digunakan untuk beberapa hal berikut:

Mengecek autentikasi, jika halaman butuh autentikasi sedangkan user belum login maka middleware mengarahkan user ke halaman login.
Mengecek role dan permission, jika halaman butuh role atau permission tertentu sedangkan user tidak memilikinya maka middleware mengarahkan ke halaman 403 atau 404.
Logging, mencatat setiap perubahan halaman.

Di Vue Router, middleware bisa dibuat dengan Navigation Guard.

Contoh, disini kita membuat middleware autentikasi, berikut flownya:

Cek apakah halaman butuh autentikasi.
Jika butuh, ambil login state.
Jika login state nilainya false maka redirect ke halaman login.

Berikut langkah-langkah membuat middleware autentikasi di vue router:

1. Membuat Fungsi Middleware

Pertama, buat fungsi middleware di sebuah file baru. Misalnya di src/router/guards/auth.guard.js.

export function authGuard(to, from) {
    // logic middleware
}

Fungsi middleware akan menerima dua parameter, to dan from.

to adalah objek berisi data route dari halaman tujuan yang hendak diakses.
from adalah objek berisi data route dari halaman saat ini.

Di dalam middleware, cek apakah halaman membutuhkan autentikasi. Caranya dengan mengecek meta dari route halaman tujuan.

Jika di meta tersebut ada key auth bernilai true maka halaman tersebut membutuhkan autentikasi.

export function authGuard(to, from) {
	if (to.meta.auth) {
		// cek login state
	}
}

Ambil state login dari store/local storage sesuai tempat menyimpan login state. Misalnya dari local storage.

export function authGuard(to, from) {
	if (to.meta.auth) {
		const loggedIn = localStorage.getItem('loggedIn') === 'true'
		
		if (!loggedIn) {
			// redirect ke login
		}
	}
}

Jika state login bernilai false maka redirect ke halaman login.

Cara redirect di middleware adalah dengan me-return objek berisi deskripsi tujuan routenya. Misalnya nama route-nya. Contoh:

export function authGuard(to, from) {
	if (to.meta.auth) {
		const loggedIn = localStorage.getItem('loggedIn') === 'true'
		
		if (!loggedIn) {
			return { name: 'login' }
		}
	}
}

Kode di atas bisa disederhakan jadi seperti berikut:

export function authGuard(to, from) {
	if (to.meta.auth && localStorage.getItem('loggedIn') !== 'true') {
		return { name: 'login' }
	}
}

2. Registrasi Middleware ke Router

Lanjut, registrasi middleware ke Vue Router.

Buka file tempat Vue Router dibuat, misalnya di src/router/router.js.

import { createWebHistory, createRouter } from 'vue-router'

const router = createRouter({
	routes: [
		// daftar routes
	],
	history: createWebHistory()
})

export { router }

Import file middleware yang sudah dibuat.

import { authGuard } from './guards/auth.guard.js'

Registrasi middleware ke router, caranya dengan memanggil method beforeEach di router dengan memasukkan middleware-nya.

router.beforeEach(authGuard)

Hasil akhir file router.js.

import { createWebHistory, createRouter } from 'vue-router'
import { authGuard } from './guards/auth.guard.js'

const router = createRouter({
	routes: [
		// daftar routes
	],
	history: createWebHistory()
})

router.beforeEach(authGuard)

export { router }

3. Menambahkan Middleware ke Route Halaman

Tambahkan middleware auth ke route yang ingin diproteksi dengan autentikasi.

Caranya adalah dengan menambahkan objek meta dengan properti auth: true. Contoh:

import { createWebHistory, createRouter } from 'vue-router'
import { authGuard } from './guards/auth.guard.js'

const router = createRouter({
	routes: [
		{
			path: '/',
			name: 'dashboard',
			meta: { auth: true },
			component: () => import ('../components/Dashboard.vue')
		}
	],
	history: createWebHistory()
})

router.beforeEach(authGuard)

export { router }

4. Mencoba Middleware

Setelah middleware ditambahkan, coba akses halaman /dashboard dengan kondisi belum login. Maka halaman otomatis akan dialihkan ke halaman /login.

Itu saja cara membuat middleware di vue router, untuk membuat middleware lain bisa ikuti langkah-langkah di atas.