Di materi sebelum-sebelumnya, kita telah berhasil menampilkan data categories di dalam navbar. Sekarang kita akan lanjutkan lagi belajar bagaimana cara menampilkan data user yang sedang login di dalam navbar.
Konsepnya, jika user belum login kita akan menampilkan button
LOGIN, tapi jika user sudah login kita akan tampilkan nama user
tersebut. Jadi kita cukup bermain menggunakan kondisi if dan else untuk
problem seperti ini.
Langlah 1 - Edit Component Header Web
Sekarang kita akan melakukan penambahan beberapa kode di dalam component Header Web
untuk menampilkan data user yang sedang login.
Silahkan buka file src/components/web/Header.jsx, kemudian ubah semua kode-nya
menjadi seperti berikut ini :
//import react and hook
import React, { useState, useEffect } from "react";
//import component react bootstrap
import {
Navbar,
Container,
Nav,
NavDropdown,
} from 'react-bootstrap';
//import react router dom
import { Link } from "react-router-dom";
//import BASE URL API
import Api from "../../api";
//import js cookie
import Cookies from "js-cookie";
function WebHeader() {
//state categories
const [categories, setCategories] = useState([]);
//state user logged in
const [user, setUser] = useState({});
//token
const token = Cookies.get("token");
//function "fetchDataCategories"
const fetchDataCategories = async () => {
//fetching Rest API "categories"
await Api.get('/api/web/categories')
.then((response) => {
//set data to state
setCategories(response.data.data);
});
}
//function "fetchDataUser"
const fetchDataUser = async () => {
//fetching Rest API "user"
await Api.get('/api/admin/user', {
headers: {
//header Bearer + Token
Authorization: `Bearer ${token}`,
}
})
.then((response) => {
//set data to state
setUser(response.data);
});
}
//hook
useEffect(() => {
//call function "fetchDataCategories"
fetchDataCategories();
//if token already exists
if(token) {
//call function "fetchDataUser"
fetchDataUser();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<React.Fragment>
<Navbar collapseOnSelect expand="lg" className="navbar-custom shadow-sm" fixed="top">
<Container>
<Navbar.Brand as={Link} to="/" className="fw-bold text-white"><i className="fa fa-map-marked-alt"></i> TRAVEL GIS</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<NavDropdown title={<span><i className="fa fa-list-ul"></i> CATEGORIES</span> } id="collasible-nav-dropdown" className="fw-bold text-white">
{
categories.map((category) => (
<NavDropdown.Item as={Link} to={`/category/${category.slug}`} key={category.id}><img src={category.image} style={{ width: "35px" }} alt=""/> {category.name.toUpperCase()}</NavDropdown.Item>
))
}
<NavDropdown.Divider />
<NavDropdown.Item as={Link} to="/posts/direction">LIHAT LAINNYA <i className="fa fa-long-arrow-alt-right"></i></NavDropdown.Item>
</NavDropdown>
<Nav.Link as={Link} to="/places" className="fw-bold text-white"><i className="fa fa-globe-asia"></i> PLACES</Nav.Link>
<Nav.Link as={Link} to="/maps" className="fw-bold text-white"><i className="fa fa-map"></i> MAPS</Nav.Link>
</Nav>
<Nav>
<Nav.Link className="fw-bold text-white me-4"><i className="fa fa-search"></i> SEARCH</Nav.Link>
{token
? <Link to="/admin/dashboard" className="btn btn-md btn-light text-uppercase"><i className="fa fa-user-circle"></i> {user.name}</Link>
: <Link to="/admin/login" className="btn btn-md btn-light"><i className="fa fa-lock"></i> LOGIN</Link>
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
}
export default WebHeader;
Dari penambahan kode di atas, pertama kita import package Js Cookie,
karena kita akan membutuhkan sebuah token yang disimpan di dalam cookies
browser.
//import js cookie
import Cookies from "js-cookie";
Setelah itu, di dalam function component WebHeader, kita buat sebuah
state baru yang bernama user dengan jenis object. State ini akan
kita gunakan untuk menyimpan response data user yang di dapatkan dari Rest API.
//state user logged in
const [user, setUser] = useState({});
Kemudian kita buat variable baru dengan nama token, dimana isinya adalah
token yang telah kita simpan di dalam cookies browser saat user melakukan
proses otentikasi.
//token
const token = Cookies.get("token");
Dan kita membuat sebuah function baru yang bernama fetchDataUser dengan jenis
asynchronus.
//function "fetchDataUser"
const fetchDataUser = async () => {
//...
}
Di dalam function fetchDataUser kita akan melakukan HTTP
request ke dalam server menggunakan endpoint /api/admin/user
dengan method GET.
//fetching Rest API "user"
await Api.get('/api/admin/user', {
headers: {
//header Bearer + Token
Authorization: `Bearer ${token}`,
}
})
Jika proses fetching berhasil dilakukan, maka kita akan melakukan assign
response data user ke dalam state yang bernama user.
//set data to state
setUser(response.data);
Di dalam hook useEffect, kita menambahakan sebuah kondisi. Jika token
bernilai true atau user sudah login, maka kita akan memanggil
function yang bernama fetchDataUser.
//hook
useEffect(() => {
//call function "fetchDataCategories"
fetchDataCategories();
//if token already exists
if (token) {
//call function "fetchDataUser"
fetchDataUser();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Maka secara otomatis function fetchDataUser akan dijalankan pertama kali saat
component diload ketika user sudah login.
Kemudian di dalam JSX kita tinggal membuat sebuah kondisi untuk menampilkan data-nya. Jika
variable token bernilai true, maka kita akan menampilkan nama
user. Jika tidak, maka kita akan menampilkan button LOGIN.
{token
? <Link to="/admin/dashboard" className="btn btn-md btn-light text-uppercase"><i className="fa fa-user-circle"></i> {user.name}</Link>
: <Link to="/admin/login" className="btn btn-md btn-light"><i className="fa fa-lock"></i> LOGIN</Link>
}
Langkah 2 - Uji Coba
Sekarang jika kita belum melakukan proses otentikasi, maka kita akan mendapatkan hasil yang kurang lebih seperti berikut ini :
Dari gambar di atas, kita menampilkan sebuah button LOGIN, karena memang kita belum
melakukan proses otentikasi.
Sekarang silahkan lakukan proses login atau otentikasi dan jika berhasil, maka kita akan mendapatkan nama user yang sedang login di dalam navbar. Kurang lebih seperti berikut ini :
