Tutorial Laravel Passport dan Vue Js 3 #8 : Menampilkan Halaman Dashboard


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat proses login di Vue Js. Di artikel kali ini kita semua akan belajar bagaimana cara menampilkan halaman dashboard dan membuat fungsi logout.

Langkah 1 - Edit View Dashboard

Sekarang, silahkan buka file src/views/dashbaord/Index.vue kemudian ubah kode-nya menjadi seperti berikut ini :

<template>
    <div class="container-fluid mt-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        MAIN MENU
                        <hr>
                        <ul class="list-group">
                            <router-link :to="{name: 'dashboard'}"
                                class="list-group-item text-dark text-decoration-none">DASHBOARD</router-link>
                            <li @click.prevent="logout" class="list-group-item text-dark text-decoration-none"
                                style="cursor:pointer">LOGOUT</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        DASHBOARD
                        <hr>
                        Selamat Datang <strong>{{ user.name }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

    export default {

        setup() {

            //state token
            const token = localStorage.getItem('token')

            //inisialisasi vue router on Composition API
            const router = useRouter()

            //state user
            const user = ref('')
            
            //mounted properti
            onMounted(() =>{

                //check Token exist
                if(!token) {
                    return router.push({
                        name: 'login'
                    })
                }
                
                //get data user
                axios.defaults.headers.common.Authorization = `Bearer ${token}`
                axios.get('http://localhost:8000/api/user')
                .then(response => {

                    //console.log(response.data.name)
                    user.value = response.data

                })
                .catch(error => {
                    console.log(error.response.data)
                })

            })

            //method logout
            function logout() {

                //logout
                axios.defaults.headers.common.Authorization = `Bearer ${token}`
                axios.post('http://localhost:8000/api/logout')
                .then(response => {

                    if(response.data.success) {

                        //remove localStorage
                        localStorage.removeItem('token')

                        //redirect ke halaman login
                        return router.push({
                            name: 'login'
                        })

                    }

                })
                .catch(error => {
                    console.log(error.response.data)
                })

            }

            return {
                token,      // <-- state token
                user,       // <-- state user
                logout      // <-- method logout
            }

        }

    }
</script>

Di atas, pertama kita import hook onMounted dan Reactivity API ref.

import { onMounted, ref } from 'vue'

Kemudian, kita import hook useRouter dari Vue Router.

import { useRouter } from 'vue-router'

Karena kita akan menampilkan data dari server, maka kita akan menggunakan Axios untuk melakukan HTTP request ke dalam server. Oleh sebab itu, maka kita harus mengimportnya terlebih dahulu.

import axios from 'axios'

Kemudian, untuk menginisialisasi Composition APi di dalam Vue Js, kita bisa menggunakan method setup. Kurang lebih seperti berikut ini :

setup() {

	// ...
	
}

Di dalam Composition API, pertama kita buat state yang bernama token di dalam di dalamnya berupa localStorage yang memiliki nama token.

Setelah itu, kita akan menginisialisasi Vue Router menggunakan hook useRouter.

//inisialisasi vue router on Composition API
const router = useRouter()

Selanjutnya, kita buat setate baru lagi dengan nama user, state ini akan kita gunakan untuk menampung data user yang di dapatkan dari server nantinya. Dan state ini menggunakan jenis Reactivity ref.

//state user
const user = ref('')

Kemudian, kita akan menggunakan hook onMounted untuk melakukan get data user ke dalam server, dan di dalam Axios kita juga parsing token yang kita dapatkan dari locaStorage. Sebelum melakukan get data user, di dalam hook ini kita melakukan check apakah data token ada, jika tidak maka akan di arahkan ke halaman login.

//check Token exist
if(!token) {
  return router.push({
    name: 'login'
  })
}
                
//get data user
axios.defaults.headers.common.Authorization = `Bearer ${token}`
axios.get('http://localhost:8000/api/user')

Jika data user di temukan, maka akan di assign ke dalam state user.

//console.log(response.data.name)
user.value = response.data

Di atas, karena state user menggunakan jenis ref, maka untuk set data kita tambahkan single object .value.

Dan untuk menampilkan data user di dalam template, kita menggunakan kode seperti berikut ini :

<strong>{{ user.name }}</strong>

Setelah itu, kita juga menambahkan 1 method lagi untuk proses logout. Method ini akan di jalankan ketika kita melakukan klik tombol logout yang berada di dalam template.

<li @click.prevent="logout" class="list-group-item text-dark text-decoration-none" style="cursor:pointer">LOGOUT</li>

Jika link di atas di klik, maka akan di arahkan ke dalam method logout, yang mana di dalam method logout kita melakukan request ke dalam server untuk menghapus data token.

Jika proses hapus data token di server berhasil, maka kita akan melakukan remove localStorage yang bernama token di dalam browser.

//remove localStorage
localStorage.removeItem('token')

Dan kita akan di arahkan ke dalam halaman login.

Terakhir, agar semua state dan method di dalam Composition API dapat digunakan, maka kita harus melakukan return.

return {
   token,      // <-- state token
   user,       // <-- state user
   logout      // <-- method logout
}

Langkah 2 - Uji Coba

Sekarang, silahkan refresh / reload halaman dashboard, maka kita akan mendapatkan tampilan seperti berikut ini :

Sekarang, silahkan klik logout, maka kita akan berhasil melakukan proses logout dan di arahkan ke halaman login. Sampai disini pembahasan tentang bagaimana cara membuat Authentication menggunakan Laravel Passport dan Vue Js 3 Composition API.

Untuk source code, silahkan bisa mengunduhnya di link berikut ini :

Terima Kasih


EBOOK - Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR