Route Security – Latihan

by

Melanjutkan modul sebelumnya, pada modul ini Anda diharapkan untuk melakukan latihan dengan menambahkan security halaman Manage Anime.

Jika setelah selesai, silakan bandingkan dengan solusi berikut.

Solusi

Buka file app.js, lalu modifikasi element route untuk component Admin seperti berikut.

<Route path="/admin" component={(props)=> <Admin {...props} jwt={this.state.jwt} />}/>

Kemudian buka file src/components/Admin.js, lalu tambahkan pengecekan token jwt pada fungsi componentDidMount()

if(this.props.jwt===""){
    this.props.history.push({
        pathname: "/login",
    });
    return
}

Berikut isi lengkap file app.js

import React, { Component, Fragment } from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Home from './components/Home';
import Animes from './components/Animes';
import Admin from './components/Admin';
import Genres from './components/Genres';
import Anime from './components/Anime';
import Genre from './components/Genre';
import AddEditAnime from './components/AddEditAnime';
import Login from './components/Login';

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      jwt : "",
    }
    this.handleJWT(this.handleJWT.bind(this));
  }

  handleJWT = (jwt) =>{
    this.setState({jwt:jwt});
  }

  logout = () =>{
    this.setState({jwt:""});
  }

  render(){
    let loginLink;
    if(this.state.jwt===""){
      loginLink = <Link to="/login">Login</Link>
    }else{
      loginLink = <Link to="/logout" onClick={this.logout}>Logout</Link>
    }
    return (
    <Router>
      <div className="container">
        <div className="row">
            <div className="col mt-3">
              <h1 className="mt-3">Anime Collection</h1>
            </div>
            <div className="col mt-3 text-end">
              {loginLink}
            </div>            
            <hr className="mb-3"/>
        </div>
        <div className="row">
            <div className="col-md-2">
                <nav>
                    <ul className="list-group">
                        <li className="list-group-item"><Link to="/">Home</Link></li>
                        <li className="list-group-item"><Link to="/animes">Anime</Link></li>
                        <li className="list-group-item"><Link to="/genres">Genre</Link></li>
                        {this.state.jwt !== "" &&
                        <Fragment>
                          <li className="list-group-item"><Link to="/admin/anime/0">Add Anime</Link></li>
                          <li className="list-group-item"><Link to="/admin">Manage Anime</Link></li>
                        </Fragment>
                        }
                    </ul>
                </nav>
            </div>
            <div className="col-md-10">
              <Switch>
                <Route path="/animes/:id" component={Anime} />
                <Route path="/animes"><Animes /></Route>
                <Route path="/genre/:id" component={Genre} />
                <Route exact path="/login" component={(props) => <Login {...props} handleJWT={this.handleJWT}/>}/>
                <Route exact path="/genres"><Genres /></Route>
                <Route path="/admin/anime/:id" component={(props) => <AddEditAnime {...props} jwt={this.state.jwt}/>}/>
                <Route path="/admin" component={(props)=> <Admin {...props} jwt={this.state.jwt} />}/>
                <Route path="/"><Home /></Route>
              </Switch>          
            </div>
        </div>
      </div>    
    </Router>
    );
  }
}

Dan file src/components/Admin.js

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";

export default class Admin extends Component{
    state = {
        animes : [],
        isLoaded : false,
    }

    componentDidMount(){
        if(this.props.jwt===""){
            this.props.history.push({
                pathname: "/login",
            });
            return
        }

        fetch("http://localhost:4000/v1/animes")
        .then((response) => response.json())
        .then((json) =>{
            this.setState({
                animes: json.animes,
                isLoaded: true,
            })
            console.log(json)
        })
    }

    render(){
        const {animes, isLoaded} = this.state;

        if(!isLoaded){
            return <p>Data is loading...</p>
        }else{
            return(
                <Fragment>
                    <h2>Manage Anime</h2>
                    <ul>
                        {animes.map((e) =>(
                            <li key={e.id}>
                                <Link to={`/admin/anime/${e.id}`}>{e.title}</Link>
                            </li>
                        ))}
                    </ul>
                </Fragment>
                
            );
        }
    }
}

Dengan berakhirnya modul ini, tutorial Membuat Web App Menggunakan React dan Golang sudah selesai. Semoga bermanfaat.

File akhir dapat download di

Sharing is caring:

Leave a Comment