TIL 20211020 [항해99 35일차]

로그인, 회원가입 만들기

• Login, SignUp 뷰 페이지 만들기

//import 생략
//Login Component, SignUp Component도 로그인 페이지와 비슷하다.
const Login = (props) => {
  // dispatch 사용을 위해 선언
  const dispatch = useDispatch();

 // 입력된 값을 저장하기 위해 useState 사용
  const [id, setId] = React.useState("");
  const [pw, setPw] = React.useState("");

 // 로그인 버튼 클릭했을때 실행될 login 함수
  const login = () => {
  	//setLoginDB로 id와 pw값을 보낸다.
    dispatch(userCreators.setLoginDB(id, pw));
  };
  return (
    <React.Fragment>
      // 뷰 생략 
    </React.Fragment>
  );
};

export default Login;

• 리덕스 모듈 만들기(덕스구조 만들기)
  action, action creators, reducer 먼저 만들어주기(미들웨어는 나중에 만들기)

//redux-actions 가져오기
import { createAction, handleActions } from "redux-actions";
//immer 가져오기
import { produce } from "immer";
//Cookie 가져오기
import { deleteCookie, setCookie } from "../../shared/Cookie";
//axios 가져오기
import { apis } from "../../shared/api";

//actions
const LOGIN = "LOGIN";
const LOGOUT = "LOGOUT";

//actions creators
const setLogin = createAction(LOGIN, (user) => ({ user }));
const logOut = createAction(LOGOUT, (user) => ({ user }));

//initialState(초기값)
const initialState = {
  user: null,
  is_login: false,
};

//reducer
export default handleActions(
  {
    //어떤 액션에 대한 내용인지 바로 작성 ex.[LOGIN]
    [LOGIN]: (state, action) =>
      produce(state, (draft) => {
        //setCookie("is_login", "success");
        //기본값인 initialState의 user에 user정보 넣기
        draft.user = action.payload.user;
        //기본값인 initialState의 is_login을 true로 변경
        draft.is_login = true;
      }),
    [LOGOUT]: (state, action) => produce(state, (draft) => {}),
  },
  //기본값
  initialState
);

// action creator export
const userCreators = {
  setLogin,
  logOut,
  signupDB,
  setLoginDB,
  logOutDB,
  loginCheckDB,
};

export { userCreators };

• axios 파일 만들기
  axios를 좀더 편하게 사용하려면 파일을 만들어서 사용할 API들을 모듈화 하는것이 좋다.

// axios, API 모듈화 작업
import axios from "axios";

const api = axios.create({
//baseURL -> 통신할 서버 주소 넣기 
  baseURL: "http://",
  headers: {
    "content-type": "application/json;charset=UTF-8",
    accept: "application/json,",
  },
});

export const apis = {
  // User
  login: (id, pw) =>
  //("")안에는 백엔드와 api설계때 정한 url을 넣어준다.
    api.post("/api/users/login", {
    //key:value 형식인데 여기서 key값에는 꼭 api설계때 request 정한 키값으로 작성
      loginId: id,
      userPw: pw,
    }),
  signup: (id, pw, name, nick) =>
    api.post("/api/users/register", {
      userId: id,
      userPw: pw,
      userName: name,
      userNameId: nick,
    }),

• 쿠키 파일 만들기
  서버에서 토큰을 받아 쿠키에서 저장할때 name(변수명)=토큰값으로 저장된다.
  그래서 나중에 다시 토큰값을 보낼때는 name(변수명)=이부분을 빼고 보내야한다.
  이번에는 서버쪽에서 토큰보낼때 Bearer 토큰값 이렇게 보내면 된다고 했다. Bearer뒤에 띄어쓰기도 있다는거 기억하자..!

const setCookie = (name, value, exp = 5) => {
  let date = new Date();
  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);

  document.cookie = `${name}=${value}; expires=${date.toUTCString()}`;
  console.log("aaa", document.cookie);
};

const deleteCookie = (name) => {
  let date = new Date("2020-01-01").toUTCString();

  console.log(date);

  document.cookie = name + "=; expires=" + date;
  console.log("bbb", document.cookie);
};

export { setCookie, deleteCookie };

• 미들웨어 만들기
  JWT 방식이 localStorage에 저장하는 방식이 좋지않다는 글을 보고 일단 주석처리 해놓았다.
  이부분에 대해서는 좀더 공부가 필요할 것 같다.. JWT 어렵다... 😢

// middleware actions
//회원가입
const signupDB = (id, pw, name, nick) => {
  return function (dispatch, getState, { history }) {
    apis
      .signup(id, pw, name, nick)
      .then((res) => {
        console.log(res);
        history.push("/login");
      })
      .catch((err) => {
        window.alert("이미 존재하는 아이디입니다.");
        console.log(err);
      });
  };
};

//로그인
const setLoginDB = (id, pw) => {
  return function (dispatch, getState, { history }) {
    apis
      .login(id, pw)
      .then((res) => {
        console.log(res);
        setCookie("token", res.data.token, 5);
        console.log(res.data.token);
        //localStorage.setItem("userId", id);
        dispatch(setLogin({ id }));
        history.replace("/");
      })
      .catch((err) => {
        window.alert("아이디 및 비밀번호를 확인해주세요!");
      });
  };
};

---

오늘 서버와 연동할때 로그인, 회원가입 오래걸릴 줄 알았는데 생각보다 빨리 해결되서 당황스러웠다... 확실히 저번주차때 연동하는 방법을 한번 경험해서 그런지 속도가 빨라진거같다.
JWT로 로그인이 진행될때 쿠키에 저장할지 localStorage에 저장할지는 공부를 더 해야겠다. 아직도 이부분은 잘 이해가 안된다...😢
그리고 나중에 글을 쓸때나 수정할때나 등등 토큰값을 서버에 보내줘서 유저를 확인할 때 이번 노드에서는 Bearer 형식으로 토큰을 보내주기!