본격 연동 #2. 보안 강화된 인증 및 접근 제어 설계 과정

🔹 서론

웹 애플리케이션에서 로그인 및 인증 보안 강화는 필수입니다. 저는 프로젝트 <거지나기 : wallet Guardians>의 프론트엔드에서 로그인, 토큰 인증, 사용자 정보 보호, 접근 제어 등의 보안 과정을 설계하면서 보다 안전한 사용자 경험을 제공할 수 있도록 개선했습니다.

 

이번 포스팅에서는 우리가 적용한 보안 설계 과정에 대해 정리합니다.

 

1️⃣ JWT 기반 인증 시스템 구축

✅ 로그인 시 토큰 발급 및 저장

• 사용자가 로그인하면 JWT(JSON Web Token) 를 발급하여 인증을 관리합니다.
• accessToken과 refreshToken을 서버에서 응답받아 클라이언트(LocalStorage)에 저장합니다.당연히 이 과정은 백엔드와 소통으로서 정했던 방식입니다.로그인 함수 로직입니다.

const handleLogin = async (e) => {
  e.preventDefault();
  try {
    const data = await login(email, password);
    const { accessToken, refreshToken } = data.data;

    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);
  } catch (error) {
    console.error('로그인 실패:', error);
  }
};

 

✅ 요청 인터셉터에서 최신 토큰 반영  -> 재사용성 증가

api 통신을 수많은 컴포넌트에서 진행하기에 하나의 axios 통신 객체인 apiClient.jsx를 활용했습니다.

apiClient 통신 객체의 생성 시점, 2개의 인터셉터 

• Axios 인터셉터를 활용하여 API 요청 시 항상 최신 토큰을 자동으로 추가하도록 설정
• 초기 API 클라이언트 생성 시 headers에 토큰을 추가하는 것이 아니라, 인터셉터에서 요청 시점에 추가하는 방식을 사용 (토큰 갱신 시 즉시 반영 가능)
• 초기 시점에 추가해버리면 오류가 날 가능성이 높음. 동적인 처리를 위해선 매 요청마다 인터셉트하여 관리해야함

apiClient.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      config.headers['ACCESS-AUTH-KEY'] = `BEARER ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

 

 

2️⃣ 로그아웃 및 토큰 관리

✅ 로그아웃 시 토큰 제거

• 사용자가 로그아웃하면 로컬 스토리지의 토큰을 삭제하고 로그인 페이지로 이동합니다.
• 이를 통해 다른 사용자가 동일한 브라우저에서 접근할 위험을 방지합니다.

export const logout = async () => {
  try {
    await apiClient.delete('/auth/logout');
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    window.location.href = '/login';
  } catch (e) {
    console.log('로그아웃 중 에러 발생:', e);
  }
};

 

 

3️⃣ 사용자 정보 보호 및 접근 제어

✅ 사용자 정보 조회 API 적용

• 로그인 후, 사용자 정보를 조회하여 유저 상태를 관리합니다.
• 유저의 역할(Role) 및 ID를 활용해 페이지 접근을 제한할 수 있도록 설계합니다.

export const getUserInfo = async () => {
  try {
    const response = await apiClient.get('/auth/info');
    return response.data.data;
  } catch (error) {
    console.error('유저 정보 조회 실패:', error);
    throw error;
  }
};

✅ 공통 레이아웃에 유저 정보 표시

• Navbar에 유저 정보를 표시하여 현재 로그인한 사용자를 직관적으로 알 수 있도록 구현했습니다.

import { useEffect, useState } from 'react';
import { getUserInfo } from '../api/authApi';

const UserInfoComponent = () => {
  const [userInfo, setUserInfo] = useState(null);
  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const data = await getUserInfo();
        setUserInfo(data);
      } catch (error) {
        console.error('유저 정보 조회 실패:', error);
      }
    };
    fetchUserData();
  }, []);
  return userInfo ? <p>👤 {userInfo.username}</p> : <p>유저 정보 없음</p>;
};

4️⃣ 보안 강화된 접근 제한 로직

✅ AuthenticatedComponent를 활용한 접근 제한

• 로그인 및 목표 금액 설정이 완료된 경우만 메인 페이지를 사용할 수 있도록 함.
• 로그인이 안 된 경우 → /login으로 이동
• 목표 금액이 없는 경우 → /goal-setting으로

import { useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { GoalContext } from '../context/GoalContext';

const AuthenticatedComponent = ({ children }) => {
  const { goalAmount, loading } = useContext(GoalContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (loading) return;
    const accessToken = localStorage.getItem('accessToken');
    if (!accessToken) {
      navigate('/login');
      return;
    }
    if (goalAmount === null) {
      navigate('/goal-setting');
    }
  }, [goalAmount, loading, navigate]);

  return children;
};

export default AuthenticatedComponent;

 

✅ App.jsx에 보안 적용

• 로그인 및 목표 금액 설정이 완료된 경우에만 메인 화면 및 주요 페이지 접근 가능하도록 적용

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import StartPage from './pages/StartPage';
import LoginPage from './pages/LoginPage';
import ProfilePage from './pages/ProfilePage';
import NotFoundPage from './pages/NotFoundPage';
import IncomePage from './pages/IncomePage';
import MainPage from './pages/MainPage';
import ExpensePage from './pages/ExpensePage';
import InitialPage from './pages/InitialPage';
import GoalSettingPage from './pages/GoalSettingPage';
import GraphPage from './pages/GraphPage';
import InputEntryPage from './pages/InputEntryPage';
import ReceiptPicPage from './pages/ReceiptPicPage';

import { GoalProvider } from './context/GoalContext'; // ✅ GoalContext import
import { SidebarProvider } from './context/SidebarContext';
import { FriendProvider } from './context/FriendContext';
import FriendModal from './components/FriendModal';
import AuthenticatedComponent from './components/AuthenticatedComponent'; // ✅ 인증 컴포넌트 추가
import Layout from './components/Layout'; // ✅ 공통 레이아웃 import

import './style/MainPage.scss';

const App = () => {
  return (
    <SidebarProvider>
      <GoalProvider>
        <FriendProvider>
          <Routes>
            {/* ✅ 인증이 필요한 페이지를 AuthenticatedComponent로 감싸기 */}
            <Route
              element={
                <AuthenticatedComponent>
                  <Layout />
                </AuthenticatedComponent>
              }
            >
              <Route path="/main" element={<MainPage />} />
              <Route path="/profile" element={<ProfilePage />} />
              <Route path="/income" element={<IncomePage />} />
              <Route path="/expenses" element={<ExpensePage />} />
              <Route path="/graph" element={<GraphPage />} />
              <Route path="/input-entry/:date" element={<InputEntryPage />} />
              <Route path="/receipt-picture" element={<ReceiptPicPage />} />
            </Route>

            {/* 🔹 개별 페이지 (인증 필요 없음) */}
            <Route path="/initial" element={<InitialPage />} />
            <Route path="/goal-setting" element={<GoalSettingPage />} />
            <Route path="/" element={<StartPage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="*" element={<NotFoundPage />} /> {/* 404 페이지 */}
          </Routes>

          <FriendModal />
        </FriendProvider>
      </GoalProvider>
    </SidebarProvider>
  );
};

export default App;

 

✅ 결론

🔹 현 시점. 설계한 보안 시스템 (프로토타입)

1. JWT 기반 인증 시스템 적용 (토큰 발급 및 요청 시 최신 토큰 반영)
2. 로그아웃 시 토큰 제거로 보안 강화
3. 유저 정보 보호 및 역할(Role) 기반 접근 제어
4. 목표 금액 설정 여부를 기준으로 접근 제한 (AuthenticatedComponent 활용)

🔹 보안 효과

• 로그인 여부를 체크하여 비인가 사용자 차단
• 목표 금액을 설정하지 않으면 주요 기능 접근 제한
• 최신 토큰을 반영하여 인증 오류 방지