Tutorial Membuat Authentication di Adonis JS #6 : Membuat Middleware - Halo teman-teman semuanya, di artikel sebelumnya kita semua sudah berhasil membuat halaman dashboard setelah melakukan login di Adonis JS.
Di artikel sebelum-sebelumnya kita sudah berhasil membuat proses register, login dan sudah berhasil juga menampilkan halaman dashboard.
Akan tetapi disini masih banyak sekali kekurangnya, misalkan saja kasusnya seperti berikut ini, teman-teman silahkan mengakses halaman dashboard tanpa login, maka halaman dashboard akan bisa langsung diakses atau akan keluar sebuah error.
Dan lagi coba silahkan teman-teman melakukan login dan setelah berhasil masuk ke halaman dashboard teman-teman coba akses lagi halaman loginnya kembali. Maka halaman login tersebut masih bisa di akses padahal kita sebelumnya sudah melakukan proses login.
Jadi disini nanti kita semua akan belajar membuat sebuah middleware yang mana middleware ini kita gunakan untuk melakukan verifikasi user yang sudah login dan user yang belum login.
Disini nanti kita akan membuat 2 middleware baru, yaitu :
-
Authenticate - middleware ini kita akan gunakan untuk melakukan verifikasi sebuah halaman bisa diakses apabila user sudah melakukan login.
-
RedirectIfAuntheticated - middleware ini kita akan gunakan di bagian proses register dan login, middleware ini akan mengecek jika user yang sudah login mengakses halaman login dan register, maka user tersebut akan di redirect / diarahkan kembali ke halaman dashboard.
Langsung saja kita mulai, pertama kita akan membuat middleware Authenticate terlebih dahulu, silahkan teman-teman jalankan perintah dibawah ini :
adonis make:middleware Authenticate --type=http
Jika berhasil, teman-teman akan melihat kurang lebih seperti berikut ini :
✔ create app/Middleware/Authenticate.js
? Register middleware as follows
→ Open start/kernel.js file
→ Register App/Middleware/Authenticate under global or named middleware
Dari output diatas, kita diberi tahu bahwa kita berhasil dibuatkan sebuah middleware baru dengan nama Authenticate.js yang berada di dalam folder app/Middleware.
Dan kita disuruh untuk mendaftarkan middleware kita di dalam start/kernel.js dibagian named middleware. Sekarang silahkan buka kernel.js dan cari kode berikut ini :
const namedMiddleware = {
auth: 'Adonis/Middleware/Auth',
guest: 'Adonis/Middleware/AllowGuestOnly',
}
Sekarang ubah menjadi seperti berikut ini :
const namedMiddleware = {
auth: 'Adonis/Middleware/Auth',
guest: 'Adonis/Middleware/AllowGuestOnly',
Authenticate: 'App/Middleware/Authenticate'
}
Langkah selanjutnya kita akan melakukan modifikasi file middleware Authenticate kita, silahkan buka app/Middleware/Authenticate.js dan ubah kodenya menjadi seperti berikut ini :
'use strict'
/** @typedef {import('@adonisjs/framework/src/Request')} Request */
/** @typedef {import('@adonisjs/framework/src/Response')} Response */
/** @typedef {import('@adonisjs/framework/src/View')} View */
class Authenticate {
/**
* @param {object} ctx
* @param {Request} ctx.request
* @param {Function} next
*/
async handle ({ response, auth }, next) {
// call next to advance the request
try {
await auth.check()
} catch (error) {
return response.route('login.index')
}
await next()
}
}
module.exports = Authenticate
Oke sampai disini kita sudah menambahkan 1 middleware baru, selanjutnya kita akan membuat 1 middleware lagi dengan nama RedirectIfAuthenticated.
Silahkan teman-teman jalankan perintah dibawah ini :
adonis make:middleware RedirectIfAuthenticated --type=http
Jika berhasil, teman-teman akan melihat kurang lebih seperti berikut ini :
✔ create app/Middleware/RedirectIfAuthenticated.js
? Register middleware as follows
→ Open start/kernel.js file
→ Register App/Middleware/RedirectIfAuthenticated under global or named middleware
Dari output diatas, kita diberi tahu bahwa kita berhasil dibuatkan sebuah middleware baru dengan nama RedirectIfAuthenticated.js yang berada di dalam folder app/Middleware.
Dan kita disuruh untuk mendaftarkan middleware kita di dalam start/kernel.js dibagian named middleware. Sekarang silahkan buka kernel.js dan cari kode berikut ini :
const namedMiddleware = {
auth: 'Adonis/Middleware/Auth',
guest: 'Adonis/Middleware/AllowGuestOnly',
Authenticate: 'App/Middleware/Authenticate'
}
Ubah menjadi seperti berikut ini :
const namedMiddleware = {
auth: 'Adonis/Middleware/Auth',
guest: 'Adonis/Middleware/AllowGuestOnly',
Authenticate: 'App/Middleware/Authenticate',
RedirectIfAuthenticated: 'App/Middleware/RedirectIfAuthenticated',
}
Langkah selanjutnya kita akan melakukan modifikasi file middleware RedirectIfAuthenticated kita, silahkan buka app/Middleware/RedirectIfAuthenticated.js dan ubah kodenya menjadi seperti berikut ini :
'use strict'
/** @typedef {import('@adonisjs/framework/src/Request')} Request */
/** @typedef {import('@adonisjs/framework/src/Response')} Response */
/** @typedef {import('@adonisjs/framework/src/View')} View */
class RedirectIfAuthenticated {
/**
* @param {object} ctx
* @param {Request} ctx.request
* @param {Function} next
*/
async handle ({ request, auth, response }, next) {
// call next to advance the request
try {
await auth.check()
return response.route('dashboard')
} catch (error) {
await next()
}
}
}
module.exports = RedirectIfAuthenticated
Sampai disini kita semua sudah berhasil menambahkan 2 middleware baru, langkah terakhir kita akan merubah semua routes project kita dengan menginisialisasi dengan middleware.
Sekarang silahkan buka file start/routes.js dan ubah semua route yang sudah kita bikin sebelumnya menjadi seperti berikut ini :
/**
* register
*/
Route.get('register', 'Auth/RegisterController.index').as('register.index').middleware(['RedirectIfAuthenticated'])
Route.post('register', 'Auth/RegisterController.store').as('register.store').middleware(['RedirectIfAuthenticated'])
/**
* login
*/
Route.get('login', 'Auth/LoginController.index').as('login.index').middleware(['RedirectIfAuthenticated'])
Route.post('login', 'Auth/LoginController.check').as('login.check').middleware(['RedirectIfAuthenticated'])
Route.get('logout', 'Auth/LoginController.logout').as('logout').middleware(['Authenticate'])
/**
* dashboard
*/
Route.get('dashboard', 'DashboardController.index').as('dashboard').middleware(['Authenticate'])
Dari kode diatas, kita sudah menambahkan sebuah middleware di dalam route kita, sekarang kita coba jalankan kembali project kita dan sekarang semuanya sudah berhasil normal.
Sampai disini pembahasan tentang membuat Authentication di Adonis JS, jika teman-teman ada pertanyaan atau kesulitan silahkan bisa bertanya melalui kolom komentar dibawah artikel.
Terima Kasih