API Routes

API Routes

0. 시작하기 전..

 - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기)

 

1. 로그인 페이지

 - 이번에는 로그인 페이지를 구현해보겠습니다.

 - #1. pages 폴더 안에 admin.js 파일을 생성 후, 다음과 같이 입력해줍니다.

export default function Admin() {
  return <>admin</>;
}

 

 - #2. Gnb.js 파일에서 다음과 같이 수정해줍니다.

    → 브라우저에서 실행해보면 제대로 나오는 것을 확인할 수 있습니다. 

import { useRouter } from "next/router";
import { Menu } from "semantic-ui-react";

export default function Gnb() {
  const router = useRouter();
  let activeItem;

  if (router.pathname === "/") {
    activeItem = "home";
  } else if (router.pathname === "/about") {
    activeItem = "about";
  } else if (router.pathname === "/admin") {
    activeItem = "admin";
  }

  // 버튼 클릭 시, 원하는 링크로 이동하기
  function goLink(e, data) {
    if (data.name === "home") {
      router.push("/");
    } else if (data.name === "about") {
      router.push("/about");
    } 
  }

  return (
    <Menu inverted>
      <Menu.Item name="home" active={activeItem === "home"} onClick={goLink} />
      <Menu.Item
        name="about"
        active={activeItem === "about"}
        onClick={goLink}
      />
      <Menu.Item
        name="Contact us"
        active={activeItem === "contact"}
        onClick={() => {
          router.push("/contact");
        }}
      />
      <Menu.Item
        name="admin"
        active={activeItem === "admin"}
        onClick={() => {
          router.push("/admin");
        }}
      />
    </Menu>
  );
}

 

 - #3. pages 폴더 안에 login.js 파일을 생성 후, 다음과 같이 입력해줍니다.

import { Button, Form } from "semantic-ui-react";

export default function Login() {
  return (
    <div style={{ padding: "100px 0", textAlign: "center" }}>
      <Form>
        <Form.Field inline>
          <input placeholder="ID" />
        </Form.Field>
        <Form.Field inline>
          <input type="password" placeholder="Password" />
        </Form.Field>
        <Button color="blue">Login</Button>
      </Form>
    </div>
  );
}

 

2. API Routes

 - 이제 로그인 되어있는 사용자인지 아닌지 API Routes를 통해 알아내고, 아닐 시, 로그인 페이지가 나오게 작업해보겠습니다.

 - #1. api 폴더 안에 isLogin.js 파일을 생성 후, 다음과 같이 입력해줍니다.

export default (req, res) => {
  res.statusCode = 200;
  res.json({ name: null });
}

 

 - #2. admin.js 파일에 들어가 다음과 같이 입력해줍니다.

    → 브라우저로 돌아가 admin 메뉴를 클릭하면, 로그인이 되어있지 않으니, 로그인 화면으로 넘어가는 것을 확인할 수 있습니다.  

import Axios from "axios";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Admin() {
  const router = useRouter();
  function checkLogin() {
    Axios.get("/api/isLogin").then((res) => {
      if (res.status === 200 && res.data.name) {
        // 로그인
      } else {
        // 로그인 안됨
        router.push("/login");
      }
    });
  }

  useEffect(() => {
    checkLogin();
  }, []);
  return <>admin</>;
}

 

 - #3. api 폴더 안에 login.js 파일을 생성 후, 다음과 같이 입력해줍니다.

    → 이 때, a_name은 쿠키명, Max-age=3600은 3600초라는 뜻입니다.

export default (req, res) => {
  // res.statusCode = 200;
  // res.json({ name: null });
  if (req.method === "POST") {
    res.setHeader("Set-Cookie", "a_name=Mike;Max-Age=3600;HttpOnly,Secure");
    res.statusCode = 200;
    res.json({ message: "ok" });
  }
};

 

 - #4. pages 폴더 안에 있는 login.js로 들어가 다음과 같이 수정해줍니다.

    → 이렇게 하면 api 폴더 안에 있는 login.js로 POST를 할 수 있습니다. 

import Axios from "axios";
import { useRouter } from "next/router";
import { Button, Form } from "semantic-ui-react";

export default function Login() {
  const router = useRouter();
  function login() {
    Axios.post("/api/login").then((res) => {
      if (res.status === 200) {
        // 로그인 성공
        router.push("/admin");
      }
    });
  }
  return (
    <div style={{ padding: "100px 0", textAlign: "center" }}>
      <Form>
        <Form.Field inline>
          <input placeholder="ID" />
        </Form.Field>
        <Form.Field inline>
          <input type="password" placeholder="Password" />
        </Form.Field>
        <Button color="blue" onClick={login}>
          Login
        </Button>
      </Form>
    </div>
  );
}

 

 - #5. isLogin.js로 가서 다음과 같이 수정해줍니다.

    → 브라우저로 들어가서 로그인 페이지에 버튼을 클릭하면, admin으로 넘어가는 것을 확인할 수 있습니다.  

export default (req, res) => {
  res.statusCode = 200;
  res.json({ name: req.cookies.a_name });
};

 

2. 로그아웃

 - 로그인을 구현하였으니, 이번엔 로그아웃을 구현해보겠습니다.

 - #1. api 폴더 안에 logout.js 파일을 생성 후, 다음과 같이 입력해줍니다.

    → max-age가 0이면 즉시, 소멸되게 됩니다.

export default (req, res) => {
    res.setHeader("Set-Cookie", "a_name=Mike;Max-Age=0;HttpOnly,Secure");
    res.statusCode = 200;
    res.json({ message: "ok" });
};

 

 - #2. 이제 admin.js로 가서 다음과 같이 입력하여, 로그아웃 버튼을 생성합니다.

    → 로그아웃 버튼을 클릭 시, 메인 페이지로 넘어오게 됩니다.

import Axios from "axios";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { Button } from "semantic-ui-react";

export default function Admin() {
  const router = useRouter();
  const [isLogin, setIsLogin] = useState(false);

  function checkLogin() {
    Axios.get("/api/isLogin").then((res) => {
      if (res.status === 200 && res.data.name) {
        // 로그인
        setIsLogin(true);
      } else {
        // 로그인 안됨
        router.push("/login");
      }
    });
  }

  function logout() {
    Axios.get("/api/logout").then((res) => {
      if (res.status === 200) {
        router.push("/");
      }
    });
  }

  useEffect(() => {
    checkLogin();
  }, []);
  return (
    <>
      admin
      {isLogin && <Button onClick={logout}>Logout</Button>}
    </>
  );
}

 

3. 정리하며

 - 지금까지 API Routers를 이용해, 로그인 페이지와 로그아웃 버튼을 구현해보았습니다.

 

※ 참고 깃 주소 : https://github.com/NewBean0312/nextjs-study/commit/a4938d5ffd88aa19e90857c317f7e05c756ae150

API Routes를 이용한 로그인 구현 · NewBean0312/nextjs-study@a4938d5