Dengan menggunakan state isLoggedIn yang diambil dari redux store kita bisa membatasi akses ke setiap halaman pada aplikasi DinoTes.

Dimana untuk mengakses suatu halaman user harus login terlebih dahulu, jika tidak maka user akan diarahkan ke halaman login.

Untuk melakukannya kita harus update tiga halaman utama yaitu Home, Add, dan Edit.

src/pages/Home.js

Copy
1import React from 'react';
2import { useSelector } from 'react-redux';
3import { Redirect } from 'react-router-dom';
4import PageLayout from '../layouts/PageLayout';
5import NotesList from '../components/NotesList';
6import Container from '../components/ui/Container';
7
8const HomePage = () => {
9  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
10
11  return (
12    <>
13      {isLoggedIn ? (
14        <PageLayout>
15          <Container>
16            <NotesList>Notes List</NotesList>
17          </Container>
18        </PageLayout>
19      ) : (
20        <Redirect to="/login" />
21      )}
22    </>
23  );
24};
25
26export default HomePage;

src/pages/Add.js

Copy
1import React from 'react';
2import { useSelector } from 'react-redux';
3import { Link, Redirect } from 'react-router-dom';
4import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
6import PageLayout from '../layouts/PageLayout';
7import AddNoteForm from '../components/AddNoteForm';
8import Container from '../components/ui/Container';
9import { HomeLink, Title } from '../components/ui/HomeLink';
10
11const AddPage = () => {
12  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
13
14  return (
15    <>
16      {isLoggedIn ? (
17        <PageLayout>
18          <Container>
19            <HomeLink>
20              <Title>
21                <FontAwesomeIcon icon={faArrowLeft} /> &nbsp; <Link to="/">Back</Link>
22              </Title>
23            </HomeLink>
24            <AddNoteForm />
25          </Container>
26        </PageLayout>
27      ) : (
28        <Redirect to="/login" />
29      )}
30    </>
31  );
32};
33
34export default AddPage;

src/pages/Edit.js

Copy
1import React from 'react';
2import { useSelector } from 'react-redux';
3import { Link, Redirect } from 'react-router-dom';
4import PageLayout from '../layouts/PageLayout';
5import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
7import EditNoteForm from '../components/EditNoteForm';
8import Container from '../components/ui/Container';
9import { HomeLink, Title } from '../components/ui/HomeLink';
10
11const EditPage = () => {
12  const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
13
14  return (
15    <>
16      {isLoggedIn ? (
17        <PageLayout>
18          <Container>
19            <HomeLink>
20              <Title>
21                <FontAwesomeIcon icon={faArrowLeft} /> &nbsp; <Link to="/">Back</Link>
22              </Title>
23            </HomeLink>
24            <EditNoteForm />
25          </Container>
26        </PageLayout>
27      ) : (
28        <Redirect to="/login" />
29      )}
30    </>
31  );
32};
33
34export default EditPage;

Dengan update ini maka setiap user mengakses aplikasi tanpa login, user akan diarahkan ke halaman login.