[Keycloak, Docker, React] React에서 keycloak을 더 상세하게 다뤄보자.

 

 

전포스팅에서 keycloak과 React의
기본적인 연결까지 했다.
이번엔 토큰을 가져오고,
사용자의 권한에 따라 페이지의 출입구를 관리하자.

 

 

 

 

[  Keycloak 설정하기  ]

 

[Keycloak, React, Docker] React에서 Keycloak을 본격 적용하고 코드를 하나하나 파헤쳐보자.

 

 

 

 

 

1. 흐름 설명 (복습을 포함해서)

• keycloak.js에서 keycloak 서버와 통신할 수 있는 객체를 하나 생성했다. 그리고 들어온 사용자가 페이지에 로그인을 했는지, 안했는지 확인하는 main.jsx를 만들었다. 로그인을 했다면 로그인 한 사용자의 정보를 가지고 있기 위한 AuthProvider.jsx를 만들었다.
  
  
• authFetch.js
  : 서버에 데이터를 요청할 때 토큰을 자동으로 챙겨서 보내고 유효기간을 체크한다.
  
  
• ProtectedRoute.jsx
  : 특정페이지에 들어가기 전, 로그인 여부와 권한을 검사해서 자격이 없으면 페이지에 들어오지 못하도록 막는다.
  
  
• App.jsx
  : 어떤 페이지를 보안 구역으로 설정하지 결정한다.

 

 

 

---

 

 

 

 

2. autoFetch.js
서버(백엔드)에서 사용자의 정보를 가져오기 위해(loadMe), 토큰을 Keycloak.js에서 가져와 서버로 보낸다.

 

• 전체 코드

import keycloak from "../keycloak.js";

export async function authFetch(url, options = {}) {
    if (!keycloak.authenticated) {
        throw new Error("로그인이 필요합니다.");
    }

    await keycloak.updateToken(30);

    const headers = new Headers(options.headers || {});

    if (keycloak.token) {
        headers.set("Authorization", `Bearer ${keycloak.token}`);
    }

    return fetch(url, {
        ...options,
        headers,
    });
}

 

 

• 설명이 포함된 코드

import keycloak from "../keycloak.js";

// 로그인한 사용자의 토큰을 서버에 보내서 그에 맞는 데이터 받는다.
// 이때 keycloak.js로 가서 토큰을 가져온다.
// AuthProvider는 로그인한 사람에 대한 상세 정보가 필요하다.
// 그래서 authFetch를 호출한다.
export async function authFetch(url, options = {}) {

    // 로그인이 되어있는지 확인한다.
    if (!keycloak.authenticated) {
        throw new Error("로그인이 필요합니다.");
    }

    // 토큰 유효시간이 30초 이하로 남았으면 토큰 업데이트 되도록 한다.
    // 토큰의 유효기간은 보통 5분에서 15분으로 짧다.
    // 토큰이 만료되면 에러가 발생할 수 있기 때문에 미리 체크해서 새토큰을 받아온다.
    await keycloak.updateToken(30);

    // 헤더에 토큰 넣는다.
    // 예로, 관리자에게 Read 권한이 있는 경우 그게 토큰에 있기 때문에 서버는 읽을 수 있다고 판단한다.
    // 이렇게 Bearer 토큰 시스템이 있어야 주소창을 통해 고객 정보를 보는 걸 막을 수 있다.
    // options.headers || {}는 option 안에 headers가 있으면 그거 쓰고, 없으면 빈 객체를 쓰라는 뜻이다.
    const headers = new Headers(options.headers || {});

    // keycloak.token에서 알아서 헤더에 복잡한 토큰을 붙여주도록 한다.
    // "Authorization"은 HTTP 프로토콜에서 정해둔 key고, 이 key에 내용을 넣으면 비밀번호 혹은 토큰을 의미한다.
    // `Bearer ${keycloak.token}`는 데이터 부분이다.
    // Bearer 뒤에 tokendl 붙을 것이다.
    // Authorization: Bearer abc123xyz 이런 느낌으로...
    if (keycloak.token) {
        headers.set("Authorization", `Bearer ${keycloak.token}`);
    }

    // 서버로 데이터를 받으러 간다.
    // option을 포함시켜서 모든 요청에서 함수를 그대로 쓰도록 한다.
    return fetch(url, {
        ...options,
        headers,
    });
}

authFetch는 토큰을 자동으로 부착해서 보내는 역할을 한다. 이 파일을 작성하지 않는다고 하면 고객 정보가 필요한 곳에 매번 토큰을 요청하는 코드를 작성해야한다. 

 

 

Q. 토큰을 이용해서 사용자 정보를 가져온다고 했는데, 이미 토큰에 사용자 정보가 있는 것 아닌가? 토큰에 있는 정보로 판단하면 되는거지, 굳이 서버에 데이터를 요청해서 받아오는 이유가 뭘까?

A. 토큰의 유효기간을 15분이라고 가정하자. 그러면 이 유효기간 동안엔 토큰 속 내용이 변하지 않는다. 그런데 토큰의 유효기간이 다 가기 전, 사용자의 권한이 바뀌었다. 토큰 속 내용은 15분 동안 유효하니 토큰의 내용을 꺼내서 쓰면 분명 취소된 권한이라도 사용자는 사용할 수 있을 것이다. 그래서 이런 점들을 방지하기 위해 서버에 물어보도록 유도한 것이다. 토큰의 내용은 변하지 않더라도, 이 토큰을 가지고 서버에게 사용자의 정보를 얻어오면 그 정보에는 권한이 변경되어있을 것이다.

현재 프로젝트에는 서버에 요청해야하는 더 큰 이유가 있다. 일단 keycloak을 사용한 프로젝트에 사용자마다 세세한 권한을 설정했다. 읽기 권한 / 추가 권한 / 검색 권한 등등... Keycloak 서버는 이런 세세한 권한들까지 모른다. 그래서 Keycloak은 "이 사용자는 최고관리자 역할이야."를 알려준다. 그러면 서버는 그걸 받아서 "우리 서비스에서 최고관리자는 모든 권한을 허용하고 있어."라고 상세 정보를 받아온다.

 

 

 

---

 

 

 

 

3. ProtectedRoute.jsx

페이지에 들여보내기 전, 누가 들어갈 수 있는지 보안 규칙을 정의한다.

 

• 전체 코드

import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "./AuthProvider.jsx";

export default function ProtectedRoute({ children, requiredRole, requireCustomerAccess = false }) {
    const location = useLocation();
    const auth = useAuth(); 

    if (auth.loading) {
        return (
            <div style={{ padding: 24, textAlign: "center" }}>
                권한 확인 중입니다.
            </div>
        );
    }

    if (!auth.isAuthenticated) {
        const redirect = encodeURIComponent(location.pathname);
        return <Navigate to={`/login?redirect=${redirect}`} replace />;
    }

    if (requiredRole === "SUPER_ADMIN" && !auth.superAdmin) {
        return <Navigate to="/" replace />;
    }

    if (requireCustomerAccess) {
        const canAccessCustomerPage =
            auth.superAdmin ||
            auth.customerRead ||
            auth.customerSearch ||
            auth.customerAdd ||
            auth.customerEdit ||
            auth.customerDelete;

        if (!canAccessCustomerPage) {
            return <Navigate to="/" replace />;
        }
    }

    return children;
}

 

 

• 설명이 포함된 코드

import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "./AuthProvider.jsx";

// 특정 페이지에 들여보내기 위해서 로그인은 했는지, 권한은 있는지 검사한다.
// requiredRole , requireCustomerAccess는 조건이다.
// 뒤에 나올 App.jsx에서 해당 조건을 포함시키면 필수로 확인하지만
// 그렇지 않을 경우 false가 담겨 넘어가게 된다.
export default function ProtectedRoute({ children, requiredRole, requireCustomerAccess = false }) {
    
    const location = useLocation(); // 가고자 하는 페이지
    const auth = useAuth(); // 내 로그인 정보 서버에서 꺼내온 것

    if (auth.loading) {
        return (
            // 서버에서 권한 정보를 가져오고 있는 중인 경우 로딩 화면을 띄운다.
            <div style={{ padding: 24, textAlign: "center" }}>
                권한 확인 중입니다.
            </div>
        );
    }

    // 로그인을 안한 경우
    // 로그인 페이지로 보낸 뒤, 원래 가려고 했던 페이지를 기억해둔다.
    if (!auth.isAuthenticated) {
        // 여기서 가려던 페이지를 기억해두고
        const redirect = encodeURIComponent(location.pathname);
        // 로그인 뒤, 가려던 페이지로 보내준다.
        return <Navigate to={`/login?redirect=${redirect}`} replace />;
    }

    // 최고관리자인지 검사하고, 만약 아니면 메인 페이지로 보낸다.
    if (requiredRole === "SUPER_ADMIN" && !auth.superAdmin) {
        return <Navigate to="/" replace />;
    }

    // 고객 페이지에 들어가려는 경우, 만약 권한이 하나도 없으면 들어가지 못하게 막는다.
    if (requireCustomerAccess) {
       
       // 권한이 있는지 확인한다.
        const canAccessCustomerPage =
            auth.superAdmin ||
            auth.customerRead ||
            auth.customerSearch ||
            auth.customerAdd ||
            auth.customerEdit ||
            auth.customerDelete;

        // 권한이 없는 경우 메인페이지로 보낸다.
        if (!canAccessCustomerPage) {
            return <Navigate to="/" replace />;
        }
    }
    
    // 원래 가려던 페이지로 보낸다.
    // children이 가고자 하는 페이지이다.
    return children;
}

<Route path="/permission" element={
    <ProtectedRoute requiredRole="SUPER_ADMIN"> 
        <PermissionPage />
    </ProtectedRoute>
} />

위의 코드는 App.jsx의 일부분이다. ProtectedRoute를 호출하면서 조건을 붙였다. 그렇다면 PermissionPage는 requiredRole="SUPER_ADMIN"이 필요한 것이다. 쉽게 설명해서 SUPER_ADMIN이 아니면 이 페이지는 들어갈 수 없다는 의미이다.  만약 해당 페이지에 어떤 조건도 안붙는다면 그냥 false가 붙어서 조건 상관없이 드나들 수 있다는 의미가 된다. ProtectedRoute에서 false를 설정하지 않았다면, 조건이 딱히 필요하지 않는 페이지에도 requiredRole=false를 붙여야하는 번거로움이 있다.

맨 밑에 return을 보면 children을 반환하고 있다. 왜 children이라고 적은걸까? App.jsx의 코드 일부분을 다시 살펴보자. 여기서 페이지가 <ProtectedRoute> <PremissionPage /> </ProtectedRoute> 라고 감싸져 있다. 이런 형태를 children이라고 부른다. 리액트에서 children은 부모 컴포넌트가 자식 컴포넌트를 품을 때 사용되는 이름이다. 

일련의 과정을 한 번 살펴보자. 사용자가 로그인을 안 한 상태로 고객관리페이지(/admin/customers)를 클릭했다. 그러면 ProtectedRoute에서 로그인이 안되어있으니 로그인을 하라고 내보낸다. 이때  ProtectedRoute는 /admin/customers를 기억해둔다. 사용자가 로그인을 마치면 기억해둔 /admin/customers로 다시 보내주고 권한을 확인한 뒤, children(<Customerpage />를 화면에 보여준다.

 

 

 

 

---

 

 

 

 

4. App.jsx
authFetch로 가져온 정보를 바탕으로, ProtectedRoute를 활용해 각 페이지를 감싸고 전체 경로를 완성한다.

 

• 전체 코드

import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import VipCode from "./invitecode/VipCode.jsx";
import CustomerPage from "./customer/CustomerPage.jsx";
import Login from "./admin/adminlogin/Login.jsx";
import VIP from "./invitecode/page/VipPage.jsx";
import VVIP from "./invitecode/page/VvipPage.jsx";
import DIAMOND from "./invitecode/page/DiamondPage.jsx";
import ProtectedRoute from "./auth/ProtectedRoute.jsx";
import MainPage from "./home/MainPage.jsx";
import PermissionPage from "./admin/adminsetting/PermissionPage.jsx";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>

                <Route path="/" element={<MainPage />} />

                <Route path="/invite" element={<VipCode />} />
                <Route path="/vip" element={<VIP />} />
                <Route path="/vvip" element={<VVIP />} />
                <Route path="/diamond" element={<DIAMOND />} />

                <Route path="/login" element={<Login />} />


                <Route
                    path="/admin/customers"
                    element={
                        <ProtectedRoute>
                            <CustomerPage />
                        </ProtectedRoute>
                    }
                />

                <Route
                    path="/permission"
                    element={
                        <ProtectedRoute requiredRole="SUPER_ADMIN">
                            <PermissionPage />
                        </ProtectedRoute>
                    }
                />

                <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
        </BrowserRouter>
    );
}

 

 

• 설명이 포함된 코드

import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import VipCode from "./invitecode/VipCode.jsx";
import CustomerPage from "./customer/CustomerPage.jsx";
import Login from "./admin/adminlogin/Login.jsx";
import VIP from "./invitecode/page/VipPage.jsx";
import VVIP from "./invitecode/page/VvipPage.jsx";
import DIAMOND from "./invitecode/page/DiamondPage.jsx";
import ProtectedRoute from "./auth/ProtectedRoute.jsx";
import MainPage from "./home/MainPage.jsx";
import PermissionPage from "./admin/adminsetting/PermissionPage.jsx";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>

                {/* 공개 페이지 */}
                {/* ProtectedRoute로 감싸져있지 않으면 누구나 페이지 방문 가능 */}
                <Route path="/" element={<MainPage />} />

                <Route path="/invite" element={<VipCode />} />
                <Route path="/vip" element={<VIP />} />
                <Route path="/vvip" element={<VVIP />} />
                <Route path="/diamond" element={<DIAMOND />} />

                {/* 로그인 페이지 */}
                <Route path="/login" element={<Login />} />

                {/* 관리자 페이지: 로그인 필요함 */}
                <Route
                    path="/admin/customers"
                    element={
                        <ProtectedRoute>
                            <CustomerPage />
                        </ProtectedRoute>
                    }
                />

                {/* 권한 관리 페이지: SUPER_ADMIN만 */}
                {/* 여기는 역할이 SUPER_ADMIN만 들어갈 수 있다. */}
                <Route
                    path="/permission"
                    element={
                        <ProtectedRoute requiredRole="SUPER_ADMIN">
                            <PermissionPage />
                        </ProtectedRoute>
                    }
                />

                {/* 잘못된 주소는 메인으로 */}
                <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
        </BrowserRouter>
    );
}

서버를 열 것도 아니고, 간단한 페이지에 오류 처리 페이지도 딱히 없어서 BrowserRouter로 감쌌다.(사실 이것밖에 몰랐음) 그런데 요새는 DataAPI 방식인 createBrowserRouter로 많이 쓴다고 한다. 무슨 차이가 있는지는 다음 포스팅에서 다뤄보겠다.

 

 

 

---

 

 

[  browserRouter와 createBrowserRouter의 차이점  ]

 

[React] BrowserRouter와 createBrowserRouter의 특징과 코드작성차이