Higher

);const AdminComponent = () => ( Hai Admin, Kamu cantik deh!);const UserComponent = () => ( Hai user, Jomblo kan!);const MainRouter = () => ( );export mặc định MainRouter;

pada kode diatas saya mendeklarasikan 4 functional component yakni Navigation, HomeComponent, AdminComponent, và UserComponent.

Bạn đang xem: Higher

MainRouter merupakan component yang mengatur alamat atau router dari React-App, yang didalamnya didefinisikan alamat-alamat atau rute pada applikađắm đuối ini.Navigation untuk membuat komponen berupa Daftar menu.HomeComponent untuk menampilkan imê man dari alamat atau halaman utama.AdminComponent untuk menampilkan halaman yang nantinyahanya dapat diakses oleh Admin.UserComponent untuk menampilkan halaman yang nantinya dapat di akses oleh User.

dan padomain authority baris akhir kode diatas, adomain authority Export Default yang digunakan untuk mengexport komponen atau function javascript yang dimana menjadi mặc định ketika di import nantinya.

Kemudian, ubah beberapa bagian atau baris kode pada App.js , berikut kodenya:

import React, Component from 'react';//import biệu tượng công ty from './biểu tượng logo.svg';//import './App.css';import Routers from './Router';class App extends Component render() return ; export mặc định App;jika selesai, silahkan di jalankan proyek ReactJs tersebut, maka bentuk dari applikađắm đuối tersebut seperti gambar gerak dibawah ini.


*

*

Okay, sekian untuk tahap ini hehehe. maksudnya untuk tahap bagaimamãng cầu menggunakan React-Router v4.

Xem thêm: Cách Chia Màn Hình Làm 2 Trên Win 10, Cách Chia Đôi Màn Hình Máy Tính

Sekarang, kita lanjut bagaimamãng cầu membuat Auth, Membuat HOC, dan Meng-implementasikan Roles pada Komponen di ReactJs.

Tulis kode berikut padomain authority tệp tin src/Auth.js yang sudah di buat sebelumnya (asummê man tệp tin Auth.js saat ini kosong)

import React, Component from 'react';/** * Get User from Local Storage * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API *
return obeject UserData * * username: string, * role: string * */const GetUser = () => const fromStorage = JSON.parse(localStorage.getItem("user")); return !!fromStorage ? fromStorage : user: '', role: 'guest';/** * Checking role its valid *
return boolean */const isValidRole = (role, allowedRoles) => allowedRoles.includes(role);/** * Authorization (High Order Component Concept) *
return object React.Component * * Example: * # phối AllowedRoles with Component * const AuthComponent = Authorization(<'user','admin','superman'>)(MyComponent) * * # phối AllowedRoles without Component * const AuthHOC = Authorization(<'user','admin','superman'>) * const MyComponent = () => Hello * const AuthComponent = AuthHOC(MyComponent); * * ReactDOM.render( , target); */const Authorization = allowedRoles => wrappedComponent => class withAuth extends Component constructor(props) super(props); this.state = user: GetUser(), // state user assign value from GetUser function render() const role = this.state.user; return isValidRole(role: role, allowedRoles: allowedRoles) ? : Hai! kamu tidak boleh masuk dihalaman ini, rasakan chidorii ini - regards allowedRoles.join(', ') /** * define administrator role * use: Admin() */export const Admin = Authorization(<'admin'>);/** * define user role * use: User() */export const User = Authorization(<'admin','user'>);export mặc định Admin, User,pada kode diatas saya mendeklarasikan / mendefinisikan 5 Function, yakni

GetUser : sebagai fungđắm say yang mengembalikan nilai berupage authority data dari user (Store/Storage). pada fungsi mê ini, saya menggunakan Web Storage (Local Storage) pada browser, bagian ini bisa digantikan dengan storage/store lainnya, seperti Redux, Context, dan sejenisnya. Yang paling penting kita memahangươi bentuk/structure dari data tersebut.isValidRole : fungđắm đuối yang melakukan pengecheckan atau memeriksa jenis role dari user.Authorization : HOC — High order component, yakni sebuah fungtê mê (functional) yang mengembalikan atau membuat sebuah class / react.component baru, yang dimana komponen atau class yang ingin di kembalikan akan melalui proses / logika tertentu sebelum class itu di render. wrappedComponent merupakan component atau class yang akan di kembalikan tergantung kondiđắm say di dalam function HOC tersebut.Admin & User : merupakan function yang meng-implementasikan dari function Authorization . Masing-masing telah diatur allowedRoles dalam dengan jenis nilai Array dan nantinya akan Meng-implementaham WrappedComponent ketika fungđắm say ini dijalankan dan diberikan parameter berupage authority komponent/element yang dibungkus oleh HOC Authorization.

setelah menambahkan kode diatas pada Auth.js, lanjut dengan menambahkan kode padomain authority Routers.js yang dimana kita implementasikan Logika yang kita tulis pada Auth.js didalam Routers.js

Berikut contoh kodenya.

Xem thêm: Trò Chơi Mới Gặp Phải Bắn Súng: Mới Chụp Trò Chơi, Băng Đảng Mỹ Đấu Súng, 9 Người Chết (Voa60)

import Admin, Auth from './Auth';...bagian router... import React, Fragment from 'react';import BrowserRouter as Router, Route, Link from "react-router-dom";import Admin, User from './Auth'; // Add this lineconst Navigation = () => ( Home Admin Page User Page );const HomeComponent = () => ( Selamat datang);const AdminComponent = () => ( Hai Admin, Kamu cantik deh!);const UserComponent = () => ( Hai user, Jomblo kan!);/** * Implement * - Admin(AdminComponent) * - User(UserComponent) * Line 41 & 42 */const MainRouter = () => ( );export default MainRouter;kemudian simpan, atau boleh melihat potongan gambar gerak dibawah ini.


*

*

terima kasih telah membaca dan melihat gambar geraknya juga yah, jika ada penjelasan yang kurang di mengerti silahkan berikan komentar atau pertanyaan di kolom response dibawah (Hal ini sangat baik untuk mencapai penulisan yang baik pula dan berbagi ilmunya lebih mudah untuk di pahami)


Chuyên mục: Blogs