Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat proses otentikasi atau sistem login di dalam React.js menggunakan Laravel JWT atau Json Web Token. Dan di artikel kali ini kita semua akan belajar bagaimana cara menampilkan data user yang telah login di dalam halaman dashboard.
Langkah 1 - Fix Problem Halaman Login
Sebelum itu, kita masih memiliki sebuah problem di dalam halaman login, ketika kita sudah berhasil melakukan otentikasi / login dan kita telah berhasil di arahkan ke dalam halaman dashboard tapi ketika kita kembali ke halaman login lagi, maka kita masih bisa, seharusnya jika sudah pernah login maka akan di redirect / arahkan secara paksa ke dalam halaman dashboard.
Disini kita akan melakukan sedikit penambahan kode di dalam component / view dari login. Silahkan buka file src/pages/Login.js, kemudian ubah kode-nya menjadi seperti berikut ini :
//import hook react
import React, { useState, useEffect } from 'react';
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
//import axios
import axios from 'axios';
function Login() {
//define state
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
//define state validation
const [validation, setValidation] = useState([]);
//define history
const history = useHistory();
//hook useEffect
useEffect(() => {
//check token
if(localStorage.getItem('token')) {
//redirect page dashboard
history.push('/dashboard');
}
}, []);
//function "loginHanlder"
const loginHandler = async (e) => {
e.preventDefault();
//initialize formData
const formData = new FormData();
//append data to formData
formData.append('email', email);
formData.append('password', password);
//send data to server
await axios.post('http://localhost:8000/api/login', formData)
.then((response) => {
//set token on localStorage
localStorage.setItem('token', response.data.token);
//redirect to dashboard
history.push('/dashboard');
})
.catch((error) => {
//assign error to state "validation"
setValidation(error.response.data);
})
};
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-4">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<h4 className="fw-bold">HALAMAN LOGIN</h4>
<hr/>
{
validation.message && (
<div className="alert alert-danger">
{validation.message}
</div>
)
}
<form onSubmit={loginHandler}>
<div className="mb-3">
<label className="form-label">ALAMAT EMAIL</label>
<input type="email" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Masukkan Alamat Email"/>
</div>
{
validation.email && (
<div className="alert alert-danger">
{validation.email[0]}
</div>
)
}
<div className="mb-3">
<label className="form-label">PASSWORD</label>
<input type="password" className="form-control" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Masukkan Password"/>
</div>
{
validation.password && (
<div className="alert alert-danger">
{validation.password[0]}
</div>
)
}
<div className="d-grid gap-2">
<button type="submit" className="btn btn-primary">LOGIN</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
export default Login;
Dari perubahan di atas, pertama kita melakukan import hook useEffect dari React.js. Hook ini akan pertama kali dijalankan ketika component berhasil di mount atau dipasang di dalam React.js, dimana di dalam hook atau lifecycle ini kita bisa manfaatkan untuk memerika sebuah token.
//import hook react
import ..., { ..., useEffect } from 'react';
Setelah itu kita gunakan hook tersebut untuk memeriksa apakah ada localStorage dengan nama token, jika ada maka kita akan arahkan langsung ke dalam halaman /dashboard.
//hook useEffect
useEffect(() => {
//check token
if(localStorage.getItem('token')) {
//redirect page dashboard
history.push('/dashboard');
}
}, []);
Langkah 2 - Menampilkan User di Halaman Dashboard
Sekarang kita akan lanjutkan bagaimana cara menampilkan data user yang telah login di dalam halaman dashboard. Silahkan buka file src/pages/Dashboard.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook react
import React, { useState, useEffect } from 'react';
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
//import axios
import axios from 'axios';
function Dashboard() {
//state user
const [user, setUser] = useState({});
//define history
const history = useHistory();
//token
const token = localStorage.getItem("token");
//function "fetchData"
const fetchData = async () => {
//set axios header dengan type Authorization + Bearer token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
//fetch user from Rest API
await axios.get('http://localhost:8000/api/user')
.then((response) => {
//set response user to state
setUser(response.data);
})
}
//hook useEffect
useEffect(() => {
//check token empty
if(!token) {
//redirect login page
history.push('/');
}
//call function "fetchData"
fetchData();
}, []);
//function logout
const logoutHanlder = async () => {
//set axios header dengan type Authorization + Bearer token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
//fetch Rest API
await axios.post('http://localhost:8000/api/logout')
.then(() => {
//remove token from localStorage
localStorage.removeItem("token");
//redirect halaman login
history.push('/');
});
};
return (
<div className="container" style={{ marginTop: "50px" }}>
<div className="row justify-content-center">
<div className="col-md-12">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
SELAMAT DATANG <strong className="text-uppercase">{user.name}</strong>
<hr />
<button onClick={logoutHanlder} className="btn btn-md btn-danger">LOGOUT</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default Dashboard;
Dari perubahan kode di atas, pertama kita import hook useState dan useEffect dari React.js.
//import hook react
import React, { useState, useEffect } from 'react';
Setelah itu, kita import hook useHistory dari React Router Dom, kita akan gunakan hook ini untuk navigasi ke URL / halaman tertentu.
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
Karena kita akan mengirim data ke dalam server menggunakan Rest API, maka kita butuh Axios. Dan kita juga import di halaman ini.
//import axios
import axios from 'axios';
Di dalam function component Dashboard, pertama kita membuat sebuah state baru, dimana state ini aakan kita hgunakan untuk menyimpan data user yang di dapatkan dari response Rest API.
//state user
const [user, setUser] = useState({});
Kemudian kita buat variable history, dimana isinya adalah hook useHistory tujuannya agar kita lebih mudah menggunakan hook tersebut.
//define history
const history = useHistory();
Setelah itu, kita buat variable baru dengan nama token, dimana isinya adalah sebuah localStorage yang memiliki key yang bernama token. Token inilah yang kita dapatkan saat proses otentikasi. Dan selanjutnya akan kita gunakan untuk mendapatkan data di server yang membutuhkan sebuah otentikasi.
//token
const token = localStorage.getItem("token");
Dan kita membuat function baru dengan nama fetchData, dimana di dalamnya kita melakukan request ke dalam server menggunakan Axios dengan method GET.
//set axios header dengan type Authorization + Bearer token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
//fetch user from Rest API
await axios.get('http://localhost:8000/api/user')
Di atas, sebelum kita melakukan fetching kita akan set headers dari Axios untuk Authorization dengan value Bearer <spasi> Token.
Jika data berhasil di dapatkan di dalam server, maka akan masuk di dalam promise then, dimana di dalamnya kita melakukan assign data response ke dalam state user.
//set response user to state
setUser(response.data);
Setelah itu, agar function fetchData di atas dapat dijalankan saat component telah di mount / pasang, maka kita akan panggil di dalam hook useEffect.
//hook useEffect
useEffect(() => {
//check token empty
if(!token) {
//redirect login page
history.push('/');
}
//call function "fetchData"
fetchData();
}, []);
Di atas, sebelum memanggil function fetchData, kita memiliki sebuah kondisi, dimana kondisi tersebut digunakan untuk memeriksa apakah token tersedia atau tidak, jika tidak maka akan di arahkan ke halaman login.
Dan untuk memanggil data user, di dalam template, kita bisa seperti berikut ini :
SELAMAT DATANG <strong className="text-uppercase">{user.name}</strong>
Dari penambahan kode di atas, kita juga menambahkan button dan function untuk proses logout.
<button onClick={logoutHanlder} className="btn btn-md btn-danger">LOGOUT</button>
Di atas, untuk button logout kita berikan event onClick, dimana event tersebut kita arahkan ke dalam function yang bernama logoutHandler. Dan untuk function itu sendiri, kurang lebih seperti berikut ini :
//function logout
const logoutHanlder = async () => {
//set axios header dengan type Authorization + Bearer token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
//fetch Rest API
await axios.post('http://localhost:8000/api/logout')
.then(() => {
//remove token from localStorage
localStorage.removeItem("token");
//redirect halaman login
history.push('/');
});
};
Di dalam function logoutHandler, pertama kita melakukan logout ke dalam server, tujuannya agar token yang tersimpan di dalam server juga dihapus.
//set axios header dengan type Authorization + Bearer token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
//fetch Rest API
await axios.post('http://localhost:8000/api/logout')
Jika proses logout dan hapus token di server berhasil dilakukan, sekarang kita tinggal menghapus token yang berada di dalam client / web browser.
//remove token from localStorage
localStorage.removeItem("token");
Setelah token berhasil dihapus, maka langkah selanjutnya kita akan arahkan ke dalam halaman login.
//redirect halaman login
history.push('/');
Langkah 3 - Uji Coba Menampilkan Data User
Sekarang silahkan coba melakukan proses login dan jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Di atas, kita telah berhasil menampilkan nama user yang sedang login. Dan silahkan coba untuk klik button LOGOUT, maka kita akan diarahkan ke dalam halaman login lagi.
Sampai disini pembahasan bagaimana cara membuat sistem otentikasi di dalam React.js dengan Laravel JWT atau Json Web Token. Jika ada pertanyaan atau kesulitan saat melakukan praktek, silahkan bisa bertanya melalui kolom komentar atau di group telegram SantriKoding.
Terima Kasih