실전프로젝트 로그인 로직

리덕스 툴킷을 사용하여 전역으로 관리

슬라이스 생성해서 로그인유저 리듀서 만들기

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    LOGIN_USER: (state: UserState, action) => {
      state.user.email = action.payload.email;
      state.user.nickName = action.payload.nickname;
      state.user.userImage = action.payload.userImage;
      state.user.preset = action.payload.preset;
      localStorage.setItem(LocalStorageKey.Token, action.payload.token);
    },

유저 api 매개변수로 유저정보를 받고 보내준 후 받은 데이터 익스포트

const userLogin = async (loginUser: LoginUser): Promise<UserResponse> => {
  const response = await api.post(`/api/auth/login`, loginUser);
  return response.data;
};

리액트 쿼리를 사용하기 떄문에 뮤테이션훅으로 요청

성공적으로 받았을 때 디스패치로 전역적으로 로그인된 유저의 정보를 저장

이후 넥스트라우터로 메인페이지로 이동 

실패한다면 에러메시지를 담아서 에러메시지를 띄어주기 위한 스테이트로 저장 

 const signInMutation = useMutation(userLogin, {
    onSuccess: (data) => {
      dispatch(LOGIN_USER(data));
      router.push('/');
    },
    onError: (error: AxiosError) => {
      const message = error?.response?.data as string;
      if (message) {
        setServerError(message);
      } else {
        alert(
          '로그인에 실패하였습니다. 아이디 혹은 비밀번호를 다시 한번 확인해주세요'
        );
      }
    },
  });

로그인 버튼을 클릭했을 때 실행되는 함수로

유효성검사에 실패한 요소들은 에러객체에 담은 후
있다면 메시지를 스테이트에 담아서 출력 아니라면 

이메일과 비밀번호를 받아 뮤테이션 실행

 const handleLogin = (e: FormEvent) => {
    e.preventDefault();
    let errors: ErrorMessage = {};

    if (!validateEmail(signInState.email)) {
      if (!validatePassword(signInState.password)) {
        errors.message = '아이디와 비밀번호를 다시 확인해주세요';
      }
    }

    if (Object.keys(errors).length > 0) {
      setError(errors);
      return;
    } else {
      setError({ message: '' });
    }
    const sendData = {
      email: signInState.email,
      password: signInState.password,
    };
    signInMutation.mutate(sendData);
  };

 

 

이제 실전프로젝트도 마무리단계로 되어가고 있고 정리 차 했던페이지들을 업로드 할 예정입니당!
모두 파이팅 ㅠㅠ!!!