• Langkah 1 - Component Dashboard
• Langkah 2 - Uji Coba

Halo teman-teman semuanya, setelah sebelumnya kita sudah berhasil melakukan proses authentication dengan Laravel dan Vue Js, maka sekarang kita lanjutkan untuk menampilkan data user yang login dan menambahkan kode untuk cek halaman dashboard hanya bisa diakses jika user sudah login.

Langkah 1 - Component Dashboard

Silahkan buka file src/views/dashboard/Index.vue dan kemudian silahkan ubah kodenya menjadi seperti berikut ini :

<template>
    <div class="dashboard" style="margin-top:80px">
        <div class="container">
            <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="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>
    </div>
</template>

<script>

import axios from 'axios'

export default {
    name: 'Dashboard',

    data() {
        return {
            //state loggedIn with localStorage
            loggedIn: localStorage.getItem('loggedIn'),
            //state token
            token: localStorage.getItem('token'),
            //state user logged In
            user: []
        }
    },

    created() {
        axios.get('http://localhost:8000/api/user', {headers: {'Authorization': 'Bearer '+this.token}})
        .then(response => {
            console.log(response)
            this.user = response.data // assign response to state user
        })
    },

    methods: {
        logout() {
            axios.get('http://localhost:8000/api/logout')
            .then(() => {
                //remove localStorage
                localStorage.removeItem("loggedIn")    


                //redirect
                return this.$router.push({ name: 'login' })
            })
        }
    },

    //check user logged in or not
    mounted() {
        if(!this.loggedIn) {
            return this.$router.push({ name: 'login' })
        }
    }
}
</script>

Dari perubahan kode di atas, mari kita bahas satu-satu dari awal.

Pertama kita import Axios terlebih dahulu, karena nanti akan kita gunakan untuk beberapa HTTP Request ke server, seperti mendapatkan data user dan proses logout.

import axios from 'axios'

Kemudian di dalam data kita membuat beberapa state atau properti, yaitu :

• loggedIn
• token
• user

loggedIn

loggedIn ini nilainya akan kita ambil dari localStorage dengan nama itemnya loggedIn, ini akan kita gunakan sebagai cek untuk authentication halaman.

//state loggedIn with localStorage
loggedIn: localStorage.getItem('loggedIn'),

token

token juga nilainya di dapatkan dari localStorage dengan nama itemnya token, token ini akan kita manfaatkan untuk parameter header di dalam axios saat kita mengirim permintaan ke server untuk mendapatkan data.

//state token
token: localStorage.getItem('token'),

user

State atau properti user ini bernilai array, dimana ini akan kita assign sebuah data dari hasil response data user.

//state user logged In
user: []

Kemudian kita buat properti created, dimana di dalamnya kita melakukan request ke sebuah endpoint http://localhost:8000/api/user dengan parameter headers Authorization yang nilainya adalah Bearer + token. Jika data berhasil di dapatkan maka hasil response tersebut akan di assign ke dalam state atau properti user.

created() {
    axios.get('http://localhost:8000/api/user', {headers: {'Authorization': 'Bearer '+this.token}})
    .then(response => {
        console.log(response)
        this.user = response.data // assign response to state user
    })
}

Setelah data berhasil di assign ke dalam state atau properti user, sekarang kita bisa menampilkan data user tersebut di dalam template, kurang lebih seperti berikut ini :

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

Kemudian kita buat sebuah methods logout, dimana fungsi ini akan dijalankan ketikan button logour diklik.

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

Maka fungsi logout akan dijalankan dan melakukan request ke server menggunakan axios.

logout() {
    axios.get('http://localhost:8000/api/logout')
    .then(() => {

        //remove localStorage
        localStorage.removeItem("loggedIn")

        //redirect
        return this.$router.push({ name: 'login' })

    })
}

Jika request logout berhasil maka kita akan remove localStorage dengan nama item loggedIn dan akan di arahkan ke sebuah route atau halaman login.

Kemudian kita buat properti mounted, dimana di dalamnya kita gunakan untuk cek jika nilai dari state atau properti loggedIn false atau belum login, maka akan diredirect ke sebuah route atau halaman login.

Langkah 2 - Uji Coba

Sekarang jika kita buka halaman dashboard, maka kurang lebih hasilnya seperti berikut ini :

EBOOK MEMBANGUN WEBSITE SEKOLAH DENGAN LARAVEL, VUE JS DAN BOOTSTRAP 5 : https://bit.ly/ebook-laravel-vue-js