[React] 로그인 구현(Frontend)

 

우선 App.js와 기본적인 페이지를 생성한다.

 

1. App.js (나는 Routes.js) - Login, Profile는 만들어야 됨.

import React, { useContext, useEffect } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";

import Login from "../Login/Login";
import Profile from "./Profile";


export default (props) => {
  console.log(props);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route
          path="/profile"
          element={
            <RequireToken>
              <Profile />
            </RequireToken>
          }
        />

      </Routes>
    </BrowserRouter>
  );
};

 

2.  Login.js와 Profile.js 파일을 만든다.

2-1. Login.js

export default function Login(){
    return(
        <>
        
            <div style = {{minHeight: 800, marginTop: 20 }}>
                <h1>Login Page</h1>
            </div>
        
        </>
    )
}

 

2-2. Profile.js

export default function Profile(){
    return(
        <>
        
            <div style = {{minHeight: 800, marginTop: 20 }}>
                <h1>Profile Page</h1>
            </div>
            
        </>
    )
}

 

 

다음으로, 인증을 설정하기 위한 Auth.js파일을 작성한다.

 

1. Auth.js

import {
    Navigate ,
    useLocation
  } from "react-router-dom";
  
export const setToken = (token) =>{
    localStorage.setItem('rasyueToken', token)
}
export const getToken = (token) =>{
    return localStorage.getItem('rasyueToken')
}
export function RequireToken({children}) {
    
    let auth = fetchToken()
    let location = useLocation();
  
    if (!auth) {
      
      return <Navigate to="/" state={{ from: location }} />;
    }
  
    return children;
}

 

2. App.js에 아래 코드를 추가하여 불러온다.

import { RequireToken } from "../Login/Auth";

 

• Auth.js 파일을 살펴보면, 
  setToken과 getToken 은 setter, getter라고 생각하면 된다. localStorage에 저장된 token을 set, get하는 것이다.
  
  그리고, App.js에서 Auth.js의 RequireToken을 사용하고 있는데, 여기서 props.children이 사용 된다.
  children은 A 컴포넌트 태그 사이에 B 컴포넌트 내용을 보여주기를 원할 때 사용되는 props이다.
  
  
  

다음은 Proile 페이지를 보호하기 위한 단계이다.
사용자가 토큰이 없을 경우 접근할 수 없는 것이다.

 

여기서부터는, 로그인을 구현하기 위해서 Backend와의 통신을 진행할 것이다.
나는 FARM STACK을 사용하였기 때문에 React와 FastAPI을 정리하고 있는 것이다.

1. Login.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { useNavigate } from "react-router-dom";
import { setToken } from "./Auth";

export default (props) => {
  const [inputId, setInputId] = useState("");
  const [inputPw, setInputPw] = useState("");
  const navigate = useNavigate();

  const handleInputId = (e) => {
    setInputId(e.target.value); // react input 입력값 가져오기.
  };

  const handleInputPw = (e) => {
    setInputPw(e.target.value);
  };

  const onClickLogin = () => {
    axios
      .post("http://localhost:8000/login", {
        id: inputId,
        pw: inputPw,
      })
      .then((res) => {
        if (res.data.token) {
          setToken(res.data.token);
          navigate("/profile");
        }
      })
      .catch((error) => {
        console.log(error, "error");
      });
  };

  return (
    <div>
      <h2>Login</h2>
      <div>
        <label htmlFor="input_id">ID : </label>
        <input
          type="text"
          name="input_id"
          value={inputId}
          onChange={handleInputId}
        />
      </div>
      <div>
        <label htmlFor="input_pw">PW : </label>
        <input
          type="password"
          name="input_pw"
          value={inputPw}
          onChange={handleInputPw}
        />
      </div>

      <div>
        <button type="button" onClick={onClickLogin}>
          Login
        </button>
      </div>
    </div>
  );
};

• 로그인을 하기 위해서 POST 요청을 FastAPI로 구축한 api server에 아이디와 패스워드 정보를 보낸다.

 

2. Profile.js

import { useNavigate } from "react-router-dom";

export default function Profile() {
  const navigate = useNavigate();

  const signOut = () => {
    localStorage.removeItem("token_key");
    navigate("/");
  };

  return (
    <>
      <div style={{ minHeight: 800, marginTop: 20 }}>
        <h1>Profile Page</h1>

        <div>
          <button type="button" onClick={signOut}>
            Sign Out
          </button>
        </div>
      </div>
    </>
  );
}

 

Profile.js 까지 작성이 완료되었으면 react를 통해서 뷰 구성은 마친 것이다.

이제 로그인 기능을 구현하기 위해서 api 서버를 구축해야 한다.

fastapi를 이용하여 Backend를 구성할 것이다.