jwt 토큰 권한에 따른 상단 네비바 다르게 보이게 하기

jwt 토큰 권한에 따른 상단 네비바 다르게 보이게 하기

Login.js

...

try {
      const res = await axios.post('http://localhost:5000/auth/login', {
        email: username,
        password: password
      });

      if (res.data.success) {
        // 로그인 성공 시 localStorage에 토큰 저장
        localStorage.setItem('jwtToken', res.data.token);

        Swal.fire({
          icon: 'success',
          title: '로그인 성공!',
          text: `${username}님 반갑습니다!`,
          confirmButtonText: '확인'
        });

        navigate("/CCTV");
      } else {
        throw new Error('로그인 실패');
      }
    } catch (error) {
      console.error('Error during login:', error);
      Swal.fire({
        icon: 'error',
        title: '로그인 실패',
        text: '아이디 및 비밀번호가 틀렸습니다.',
        confirmButtonText: '확인'
      });
    } finally {
      setIsLoading(false);
    }
  };
  
...

먼저 로그인 로직을 살펴본후 토큰이 어디에 저장되는지 확인

// 로그인 성공 시 localStorage에 토큰 저장localStorage.setItem('jwtToken', res.data.token);

Navs.js

import { jwtDecode } from 'jwt-decode';
...

function Navs(){
	...
    const [isLoggedIn, setIsLoggedIn] = useState(false);
	const [memberGrade, setMemberGrade] = useState(2); // 기본값을 user로 설정
    ...
	}
    ...
    useEffect(() => {
      const jwtToken = localStorage.getItem('jwtToken');

      if (jwtToken) {
        const decodedToken = jwtDecode(jwtToken);
        // decodedToken의 role 필드를 기반으로 memberGrade 설정
        if (decodedToken.role === 'master') {
          setMemberGrade(0);
        } else if (decodedToken.role === 'admin') {
          setMemberGrade(1);
        } else {
          setMemberGrade(2);
        }
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
        setMemberGrade(2); // 로그인하지 않은 경우 기본값을 user(2)로 설정
      }

      const savedActiveMenu = localStorage.getItem("activeMenu") || "/";
      setActiveMenu(savedActiveMenu);
    
    ...
    
      // 로그아웃 함수
      const logout = () => {
        localStorage.removeItem('jwtToken');
        setIsLoggedIn(false);
        localStorage.removeItem("activeMenu");
        window.location.href = "/";
      };

    
    ...
    
    {isLoggedIn && memberGrade === 0 && ( // master 사용자만 표시
              <>
                <Nav.Link onClick={() => navigateTo("/Error")} style={activeMenu === "/Error" ? activeStyle : defaultStyle}>
                  이상내역
                </Nav.Link>
                <Nav.Link onClick={() => navigateTo("/Member")} style={activeMenu === "/Member" ? activeStyle : defaultStyle}>
                  회원관리
                </Nav.Link>
              </>
            )}
            
            ...
            
            {/* 마스터가 아닐 때만 사용자 아이콘 보이기 */}
            {memberGrade !== 0 && (
            <FaUserCircle size={24} onClick={() => navigateTo("/Mypage")} style={defaultStyle} />)}
            
            ...

jwt-decode 설치

setMemberGrade을 이용하여
// decodedToken의 role 필드를 기반으로 memberGrade 설정
(0은 master 1은 admin 2는 user)

• master 권한
  

• user 권한