API Routes, Login Sample(next.js)

결과

내용

API = isLogin, login, logout
Page = admin, Login

• admin: isLogin에서 cookie 확인 후 응답이 없으면(로그인이 되지 않은 상태) Login 페이지로 이동, 응답을 받으면(로그인 상태) admin 페이지로 이동
• Login: 아이디와 비번을 받으면 login(api)으로 post, 응답을 받으면(로그인 상태) admin페이지로 이동, 로그인이 되면 isLogin이 true로 변경되면서 logout 버튼이 생긴다
  이후 logout버튼을 클릭하면 logout api를 호출해서 쿠키를 삭제한 후 메인페이지로 이동한다

코드

//src/top.js
export default function top () {
    const router = useRouter();
 
        const goLink = data => {
			 if(data === 'admin')
       		 router.push('/admin')}
        
    return(
        <div>
            <button name='admin'  onClick={() => goLink('admin')}>admin</button>
        </div>
    )
}

//pages/admin.js
const admin = () => {
const router = useRouter();
const[isLogin, setIsLogin] = useState(false)

    const checkLogin = () => {
		axios.get('/api/isLogin')
		.then(res => {
         if(res.status === 200 && res.data.name)
         setIsLogin(true)
         else
         router.push('/Login')
    })}

	const logout = () => {
    	axios.get('/api/logout')
    	.then(res => {
        if(res.status === 200 )
        router.push('/')
    })}

    useEffect(() => {
        checkLogin();
    },[]);

    return(
    <div>
        <p>admin page</p>
        {isLogin && <button onClick={logout}>Logout</button>}
    </div>
    )}
    
 //pages/Login.js
    export default function Login() {
    const router = useRouter();
      
    //api/login으로 post로 내용 보내기
    const login = () => {
        axios.post('api/login')
        .then(res => {
            if(res.status === 200)
            router.push('/admin');
        })}

    return(
        <div>
            <input placeholder="id"/>
            <input placeholder="pw" type='password'/>
            <button onClick={login}>Login</button>
        </div>
    )} 
    
  //pages/api/isLogin.js  
    export default function isLogin(req, res) {
        res.status(200).json({ name: req.cookies.a_name })}

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

//pages/api/login.js
export default (req, res) => {
    //max-age가 0이 되면 쿠기는 소멸됨
    res.setHeader('Set-Cookie', 'a_name=Mike;Max-Age=0;HttpOnly,Secure')
    res.statusCode = 200;
    res.json({ message:'ok'})
}