로그인 페이지

구현내용

• 로그인 페이지 구현
• 메인 페이지 리디렉션 로직 구현

로그인을 위한 API서비스 메서드 작성

로그인 API서비스는 /auth/signin 이었습니다.

이 경로를 이용해 로그인하는 메서드를 ApiService에 작성해주겠습니다.

export function signin(userDTO) {
  return call("/auth/signin", "POST", userDTO).then((response) => {
    console.log("response : " , response);
    alert("로그인 토큰 : " + response.token);
  });

Login 컴포넌트를 수정했습니다 .  Login 컴포넌트는 이메일과 패스워드를 받는

인풋 필드와 로그인 버튼으로 이뤄져 있습니다.

사용자가 이메일과 패스워드를 입력한 후 로그인 버튼을 클릭하면 백엔드의 /auth/signin으로 

요청이 전달 될것입니다.

import React from "react";
import { signin } from "../service/ApiService";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import { Container } from "@material-ui/core";


class Login extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(ev){
        ev.preventDefault();
        const data = new FormData(ev.target);
        const email = data.get("email");
        const password = data.get("password");
        //ApiService의 signin메서드를 사용해 로그인
        signin({email:email,password:password});
    }
    render(){
        return (
            <Container component="main" maxWidth="xs" style={{ marginTop: "8%" }}>
              <Grid container spacing={2}>
                <Grid item xs={12}>
                  <Typography component="h1" variant="h5">
                    로그인
                  </Typography>
                </Grid>
              </Grid>
              <form noValidate onSubmit={this.handleSubmit}>
                {" "}
                {/* submit 버튼을 누르면 handleSubmit이 실행됨. */}
                <Grid container spacing={2}>
                  <Grid item xs={12}>
                    <TextField
                      variant="outlined"
                      required
                      fullWidth
                      id="email"
                      label="이메일 주소"
                      name="email"
                      autoComplete="email"
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      variant="outlined"
                      required
                      fullWidth
                      name="password"
                      label="패스워드"
                      type="password"
                      id="password"
                      autoComplete="current-password"
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                    >
                      로그인
                    </Button>
                  </Grid>
                </Grid>
              </form>
            </Container>
          );
        }
      }
export default Login;

위와같은 코드를 넣으면 해당 로그인 화면을 볼 수 있습니다.

이제 포스트맨을 이용해서 새 사용자를 만든 후 이페이지에서 로그인을 해보도록 해봅시다.

만약 로그인에 성공한다면 아까 alret을 이용해서 화면에 보이도록 했습니다.

{
    "email" : "zhfldk014745@naver.com",
    "username" : "김은호",
    "password" : "1234",
    "auth" : "대리"
}

회원가입성공!

로그인이 되었다는것을 알수있다.
그러나 로그인페이지로 다시 리디렉트 되었다.

이는, 로컬 스토리지를 이용한 액세스 토큰 관리를 해서 해결해주어야한다.

다음 포스팅에는 로컬스토리지를 이용해서 액세스 토큰관리를 통해 이동을 하게해줄수있다.

2021.12.15 - 로컬 스토리지

이는 개인적인 공부에도 포스팅을 할것이며, 다음포스팅에는 실습으로 보여주겠습니다.