21.04.27 redux, axios 로그인 상태 관리 프로세스

📌frontend : _actions/types.js 

액션 타입 정의하기

export const LOGIN_USER = "login_user";

📌frontend : _actions/user_action.js

axios 모듈과 액션 타입 불러오기

import axios from "axios";
import { LOGIN_USER } from "./types";

 

LoginUser 로그인 액션 함수 정의하기

export function loginUser(dataToSubmit) {
  const request = axios
    .post("/api/auth/login", dataToSubmit)
    .then((response) => response.data);
  console.log("로그인 페이로드", request);
  return {
    type: LOGIN_USER,
    payload: request,
  };
}

✔여기서 axios : 서버에 데이터를 요청 및 전달해주는 라이브러리   다음과 같은 형식으로 POST 처리 작업 실행하며 두번째 인자인 data 객체는   첫번째 인자인 "url주소"로 보낼데이터 객체이다.

axios.post(
	"url주소", {
    	data 객체
    }
)

url 경로의 데이터 흐름을 알기 위해 backend 폴더의 src를 참고하면

📌backend : routes/auth/login.js

router.post("/", async function(req,res){
	const {username, password} = req.body;
  try {
    const user = await User.findByUsername(username);
    try{
          res
        .cookie("access_token", token, {
          maxAge: 1000 * 60 * 60 * 24 * 7, //7일
          httpOnly: true,
        .json({ loginSuccess: true, userId:user._id, user:username });
        })
    }
})

req.body : dataToSubmit ,  res.json 의 데이터 객체 : request 로 연결된다. 

📌frontend : pages/LoginPage.js 

useDispatch, useState 함수 사용하여 dispatch 함수 및 초기 상태 정의 

function(props){
 const dispatch = useDispatch();
 const [Username, setUsername] = useState("");
 const [Password, setPassword] = useState("");
 //사용자 정보 body 객체에 정의해주기
 let body = {
 	username : Username, 
    	password : Password,
 }

dispatch 함수 실행->dispatch가 액션 함수 실행-> 데이터 전달

    dispatch(loginUser(body)).then((response) => {
      if (response.payload.loginSuccess) {
        props.history.push("/");
      } else {
        alert("Error");
      }
    });

 

✔사용자로부터 입력받은 데이터 body(즉, dataToSubmit)는 backend src의 req.body로 가고 

try 문 내에서 DB에서 username과 일치하면 response는 데이터 객체 { loginSuccess: true, userId:user._id, user:username }를 전달받는다.

✔loginUser함수는 객체 { type : LOGIN_USER, payload : request }를 반환한다. 

✔dispatch 함수 내에서 response.payload는 request이고 request의 loginSuccess에 대한 value는 true이므로 props.history.push('/');를 실행하며 로그인이 성공하게 된다.