~ We are changing the world with technology. ~

Matt Mullenweg

Membuat Aplikasi Ekspedisi NuxtJS #2: Authentication From Scratch

Membuat Aplikasi Ekspedisi NuxtJS #2: Authentication From Scratch

2596 Dilihat

Pendahuluan

Menerapkan fitur authentication di NuxtJS akan menjadi tugas kita pada seri kali ini, dimana sebelumnya proses integrasi bootstrap template di NuxtJS sudah berhasil dilakukan dan kita sudah memiliki sebuah halaman login dan dashboard. Skenario yang diinginkan adalah ketika user belum login maka secara otomatis akan di-redirect ke halaman login, pun berlaku sebaliknya.

Sebelum melanjutkan membaca artikel kali ini, diharapkan untuk membaca materi Membuat Aplikasi Ekspedisi Lumen 6 seri ke-1 sampai seri ke-4, karena pada materi tersebut kita belajar bagaimana membuat API (Application Programming Interface) nya untuk kemudian diintegrasikan dengan NuxtJS sebagai sebuah proses Nuxt API authentication.

Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #1: Schema Database

Fitur Authentication NuxtJS

Salah satu framework yang memanjakan penggunanya adalah NuxtJS, bagaimana tidak, sebuah library untuk proses otentikasi sudah disediakan dan dikaitkan dengan website official NuxtJS. Tahapan pertama, sebelum memasuki codingan, install terlebih dahulu library authentication dengan command

npm install @nuxtjs/auth @nuxtjs/axios

Ada beberapa hal yang perlu kita modifikasi pada file nuxt.config.js, buka file tersebelum dan cari attribute modules lalu modifikasi menjadi

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],

Masih dengan file yang sama, tambahkan attribute berikut jika belum ada.

auth: {
  strategies: {
    //METHOD LOGIN YANG AKAN KITA GUNAKAN
    local: {
      //DIMANA ENDPOINTNYA ADALAH
      endpoints: {
        //UNTUK LOGIN PADA BAGIAN URL, KITA MASUKKAN URL LOGIN DARI API YANG SUDAH KITA BUAT
        //SEDANGKAN PROPERTYNAME ADALAH PROPERTY YANG INGIN KITA AMBIL VALUENYA
        //DALAM HAL INI, LOGIN MENGHARAPKAN TOKEN, SEDANGKAN PADA API KITA ME-RETURN TOKEN DI DALAM OBJECT DATA
        login: { url: '/login', method: 'post', propertyName: 'data' },
        logout: { url: '/logout', method: 'post' },
        user: { url: '/users/login', method: 'get', propertyName: 'data' }
      },
      tokenRequired: true,
      tokenType: 'Bearer '
    }
  }
},
//SET BASE URL PROJECT API KITA, SEHINGGA SEMUA REQUEST AKAN MENGARAH KESANA
axios: {
  baseURL: 'http://dw-logistik-api.test/'
},
//MIDDLEWARE UNTUK MENGECEK SUDAH LOGIN ATAU BELUM, KITA SET GLOBAL
router: {
  middleware: ['auth']
},

Kemudian kita akan memodifikasi login page, agar bisa menerima inputan dan mengirimkan request ke server terkait proses authentication. Buka file pages/login/index.vue dan modifikasi menjadi

<!-- [.. CODE LAINNYA ..] -->

<div class="form-group">
    <input type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address..." v-model="auth.email">
</div>
<div class="form-group">
    <input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password" v-model="auth.password">
</div>
<div class="form-group">
    <div class="custom-control custom-checkbox small">
        <input type="checkbox" class="custom-control-input" id="customCheck">
        <label class="custom-control-label" for="customCheck">Remember Me</label>
    </div>
</div>
<a href="javascript:void(0)" @click="submit" class="btn btn-primary btn-user btn-block">
    Login
</a>

<!-- [.. CODE LAINNYA ..] -->

Penjelasan: Jadi input-an email dan password kita tambahkan v-model untuk menangkap value yang dimasukkan oleh user. Sedangkan pada tombol login, kita tambahkan event on click agar menjalankan method submit().

Masih dengan file yang sama, pada bagian Javascript-nya, tambahkan code berikut

<script>
import { mapMutations } from 'vuex'
export default {
    auth: false, //JADI KITA SET FALSE AGAR MIDDLEWARE TIDAK DITERAPKAN PADA HALAMAN INI
    data() {
        return {
            //VARIABLE UNTUK MENAMPUNG INPUTAN USER
            auth: {
                email: null,
                password: null
            }
        }
    },
    mounted() {
        //KITA LAKUKAN PENGECEK, JIKA SUDAH LOGIN
        if (this.$auth.loggedIn) {
            //MAKA REDIRECT KE HALAMAN UTAMA ATAU DASHBOARD
            this.$router.push('/')
        }
    },
    methods: {
        ...mapMutations(['SET_IS_AUTH']), //LOAD MUTATIONS DARI ROOT VUEX (STORE/INDEX.JS)
        //JIKA TOMBOL LOGIN DITEKAN, MAKA METHOD INI AKAN DIJALANKAN
        submit() {
            //MELAKUKAN PROSES LOGIN, DENGAN MENGGUNAKAN STRATEGIES LOCAL YANG ADA DI NUXT CONFIG
            //DAN MENGIRIMKAN DATA BERUPA EMAIL DAN PASSWORD
            this.$auth.loginWith('local', {
                data: {
                    email: this.auth.email,
                    password: this.auth.password
                }
            }).then(() => {
                //JIKA BERHASIL, KITA SET TRUE IS AUTH-NYA
                this.SET_IS_AUTH(true)
                //LALU REDIRECT KE HALAMAN UTAMA / DAHSBOARD
                this.$router.push('/')
            })
        }
    }
}
</script>

Tugas kita selanjutnya adalah membuat root vuex, buat file index.js di dalam folder store dan tambahkan code

export const state = () => ({
    isAuth: false //STATE SEBAGAI TANDAI SUDAH LOGIN JIKA BELUM
})

export const mutations = {
    //MUTATION UNTUK MENGUBAH STATE DI ATAS
    SET_IS_AUTH(state, payload) {
        state.isAuth = payload
    }
}

export const actions = {
    //PERMASALAH BARU AKAN MUNCUL KETIKA HALAMAN DIRELOAD, MAKA STATE ISAUTH AKAN DISET KEMBALI JADI FALSE KARENA PADA DASARKAN STATE AKAN HILANG JIKA HALAMAN DIRELOAD
    //MAKA KITA JALANKAN FUNGSI DIBAWHA INI, DIMANA INI AKAN BERJALAN SECARA OTOMATIS KETIKA APLIKASI KITA DILOAD
    nuxtServerInit({ commit }, context) {
        //KEMUDIAN KITA SET ISAUTH MENYESUAIKAN VALUE DARI STATE AUTHENTICATION
        commit('SET_IS_AUTH', context.app.$auth.$state.loggedIn)
    }
}

Menariknya di NuxtJS, kita tidak perlu me-register sebuah module atau apapun dari Vuex, karena semua nya akan secara otomatis dikenali jika membuatnya di dalam folder store. Adapun Header dan Sidebar akan kita load atau render berdasarkan state isAuth, jadi buka file layouts/default.vue dan modifikasi menjadi

<template>
	<div id="wrapper">
		<app-sidebar v-if="isAuth"></app-sidebar>
		<div id="content-wrapper" class="d-flex flex-column">
			<div id="content">
				<app-header v-if="isAuth"></app-header>
				<nuxt/>
			</div>
		</div>
	</div>
</template>

<script>
	import Sidebar from '@/components/layouts/Sidebar.vue'
	import Header from '@/components/layouts/Header.vue'
	import {mapState } from 'vuex'

	export default {
		data() {
			return {
				// isAuth: false SEHINGGA VARIABLE INI DIDISABLE SAJA ATAU BISA DIHAPUS
			}
		},
		computed: {
			...mapState(['isAuth']), //JADI ISAUTH KITA AMBIL DARI STATE INDEX.JSS
		},
		components: {
			'app-sidebar': Sidebar,
			'app-header': Header
		}
	}
</script>

Fitur Logout NuxtJS

Jika authentication NuxtJS sudah berhasil, maka kita harus membuat fitur logout agar lebih mudah melakukan uji coba dengan user yang berbeda. Buka file components/layouts/Header.vue dan cari html tag untuk tombol logout, lalu tambahkan event on click.

<a class="dropdown-item" @click="logout" href="#" data-toggle="modal" data-target="#logoutModal">
    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
    Logout
</a>

Dengan file yang sama, tambahkan code berikut pada bagian Javascript-nya

<script>
import { mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations(['SET_IS_AUTH']), //LOAD MUTATION DARI INDEX.JS
        //KITA GUNAKAN ASYNC AGAR BISA MENUNGGU SEBUAH PROSES SELESAI, KEMUDIAN CODE SELANJUTNYA DIJALANKAN
        async logout() {
            await this.$auth.logout() //JADI KITA TUNGGU DULU PROSES LOGOUT SELESAI
            this.SET_IS_AUTH(false) //KEMUDIAN SET ISAUTH JADI FALSE
            this.$router.push('/login') //DAN REDIRECT KE HALAMAN LOGIN
        }
    }
}
</script>

aplikasi ekspedisi nuxtjs - authentication api

Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #2: Authentication & Manage Users

Kesimpulan

Artikel ini hanya membahas bagaimana penerapan atau membuat fitur authentication di NuxtJS yang telah diintegrasikan dengan API dari seri Lumen. Beberapa bagian yang sudah kita pelajari dari materi ini adalah bagaimana menggunakan sebuah library auth, membuat fitur authentication di NuxtJS, menggunakan Vuex di NuxtJS, menggunakan middleware, dan lain sebagainya.

Adapun dokumentasi code dari artikel ini bisa dilihat di Github.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Aplikasi Ekspedisi NuxtJS #4: Manage Categories NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #4: Ma...

Mengelola data kategori akan menjadi bahasan utama kita dalam materi Membuat Aplikasi Ekspedisi NuxtJS seri ke-4. Fitur yang akan dikerjakan tidak jauh berbeda dengan materi sebelumnya yang membahas t...

Membuat Aplikasi Ekspedisi NuxtJS #3: CRUD Data Users Bagian 2 NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #3: CR...

Memanipulasi data user dengan mengimplementasikan teknik CRUD antara NuxtJS sebagai frontend dan Lumen sebagai backend. Seri membuat aplikasi ekspedisi episode NuxtJS kali ini akan membahas bagaimana...

Membuat Aplikasi Ekspedisi NuxtJS #3: CRUD Data Users Bagian 1 NuxtJS

Membuat Aplikasi Ekspedisi NuxtJS #3: CR...

Mengelola data users akan menjadi topik perbincangan kita kali ini dalam seri belajar membuat aplikasi ekspedisi dengna episode NuxtJS. Dimana pada seri kali ini kita akan belajar bagaimana membuat CR...

Komentar