cara membangun guard atau proteksi url tema vue – Di kesempatan kali ini, saya akan membagikan panduan pemrograman web. Yaitu framework front end vue js.
Seperti yang kita ketahui, di vue js terdapat sebuah file yang mengatur route dari seluruh tema. Di route ini, kita dapat menambahkan url, nama, title, guard, dan lain sebagainya. Nah, kali ini kita akan fokus ke guard pada route di vue js.
 |
| Vue Router |
Apa itu Guard di Route Vue?
Guard yaitu sebuah kode middleware yang dijalankan sebelum pengunjung web/user mengakses route tertentu. Hal ini bermanfaat bagi memproteksi tampilan client. Jadi, sebelum user masuk ke tema yang diatur oleh route, karenanya aksesnya akan ditahan sembari program mengecek status dari user tersebut. Sekiranya sesuai dengan keinginan, karenanya akses route dapat dilanjutkan. Sekiranya tak sesuai, karenanya program lain akan dijalankan.
 |
| Middleware Melindungi Ini Program |
Berikut ini cara menggunakan middleware guard di route di vue js. Saya akan menampilkan kode program se-sederhana mungkin. Pada panduan ini, kita hanya bermain di satu file saja. Yaitu file route. (src/router.js).
Baca Pun: Membuat Route Bercabang Di Vue Js
Before Enter
Kunci dari penyisipan middleware di route yaitu sebuah key bernama beforeEnter. Key ini terletak didalam objek route yang berada di pada array routes[]. beforeEnter yaitu key yang berisi sebuah function. Berikut ini contohnya.
./src/router.js
routes: [
{
path: '/',
beforeEnter: function (to,from,next) {
if (/* kondisi = true */) {
next() // Silahkan masuk ke route ini
}
else{
next({name:'home'}) // Dilempar ke route dengan name: home
}
},
meta: { title: 'My App' },
name: 'myApp',
component: () => import('./views/MyApp.vue')
}
]Kini, mari kita bedah value function dari beforeEnter
function (to,from,next) {
if (/* kondisi = true */) {
next() // Silahkan masuk ke route ini
}
else{
next({name:'home'}) // Dilempar ke route dengan name: home
}
}Function ini mempunyai 3 argumen. Yaitu to, from, dan next.
to.
Argumen ini menampilkan informasi route yang akan diakses/dimasuki oleh user (route ‘myApp’).
from.
Argumen ini menampilkan route asal user sebelum memasuki route ‘myApp’.
next.
Sesungguhnya argumen ini yaitu callback. Yang mana argumen ini akan berubah menjadi function next(). Sekiranya function next() dijalankan, artinya user diizinkan masuk ke route.
Oke, demikianlah panduan mengenai implementasi middleware guard di route vue js. Semoga artikel ini bermanfaat! Terima kasih!
