TIL 20211020[第9935便]

ログイン、会員アカウントの作成
作成

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 creaters、reduce先作成(ミドルウェアは後で作成)

//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,
    }),

Cookieファイルの作成
サーバからトークンを受信しCookieから保存する場合、name(変数名)=トークン値として格納されます.
だから後でコインを送るときは、name(변수명)=という部分を外します.
今回サーバ側でトークンを送信する場合、このようにBearer 토큰값を送信することができます.Beareの後ろにスペースがあることを覚えて...!

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でログインする場合、Cookieに保存するかlocalStorageに保存するかはさらに勉強する必要があります.私はまだこの部分をよく理解していません...😢
また,後で文章を書くとき,修正するとき,など,トークン値をサーバに送ってプレイヤーを確認するとき,今回のノードはBeare形式でトークンを送るように要求する.Beareも初めて知り合って勉強することになりました…!