[Next.js/JS] next-auth session 상태에 따라 화면 전환하기

next-auth를 적용한 것을 전제로 진행합니다. 

 

BottomNavigation을 만드는 와중 특정 버튼을 눌렀을 때 로그인 상태에 따라서

보여줄 화면을 다르게 해야하는 부분을 구현해야했다. 

 

1. import 

화면 전환에 쓸  Router와 상태값 변화 감지를 위한 useState, useEffect 그리고 세션을 가져오기 위한 getSession을 import 한다. 

import Router from "next/router";
import React, { useState, useEffect } from 'react';
import { getSession } from "next-auth/react"

2. 세션 가져와서 set 하기 

const BottomNav = () => {
  const [session, setSession] = useState(null);

  useEffect(() => {
    getSession().then((session) => {
      setSession(session);
    });
  }, []);
  
  
  
.....
}

3. 클릭했을 때 실행할 함수(화면전환) 생성 및 버튼 만들기 

 
 const BottomNav = () => {
 
 .....
 
 
 const handleButtonClick = () => {
    if (session) {
      Router.push('/mypage');
    } else {
      Router.push('/login');
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>my</button>
    </div>
  );
};

 

전체 코드 

import Router from "next/router";
import React, { useState, useEffect } from 'react';
import { getSession } from "next-auth/react"

const BottomNav = () => {
  const [session, setSession] = useState(null);

  useEffect(() => {
    getSession().then((session) => {
      setSession(session);
    });
  }, []);

  const handleButtonClick = () => {
    if (session) {
      Router.push('/mypage');
    } else {
      Router.push('/login');
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>my</button>
    </div>
  );
};

export default BottomNav;