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