React 게시판 - 경로 보호

💡 경로 보호

새 게시글 작성과 게시글 수정 기능은 모두 로그인이 되어있어야만 사용할 수 있다. 로그인이 되어있는 경우 새로운 글을 작성할 수 있는 연필 아이콘이 보인다. 그리고 만약 글을 작성한 사용자과 현재 로그인이 되어있는 사용자가 같은 사람이라면 '수정'이라는 버튼이 보이게 해두었다. 그래서 로그인이 되어있지 않으면 연필 아이콘과 버튼이 보이지 않지만 주소창에 직접 URL(/board/create 또는 /board/update/'number'/'id 와 같은
)을 치면 게시글 작성하는 페이지와 수정하는 페이지로 이동한다. 그럼 로그인하지 않은 사용자도 새 게시글을 작성하고 다른 사람이 작성한 게시글을 수정할 수 있기 때문에 이를 막기 위해 ProtectedRoute라는 컴포넌트를 따로 만들었다.

• index.js

	{
        path:'/board/create',
        element: <ProtectedRoute>
          <NewBoard />
        </ProtectedRoute>
    },
    {
        path:'/board/update/:postNumber/:boardId',
        element:<ProtectedRoute requireUser={true}>
          <BoardUpdate />
        </ProtectedRoute>
    },

NewBoard와 BoardUpdate 컴포넌트를 ProtectedRoute로 감싼다. 그리고 인증된 사용자만 특정 경로에 접근할 수 있도록 하기 위해, BoardUpdate의 requireUser prop에 true를 전달했다.

그리고 게시글을 작성할 때 작성자의 uid도 함께 게시글 정보에 저장되도록 한 다음 해당 uid를 가지지 않은 사용자(게시물의 작성자가 아닌 경우)가 URL을 통해 게시글 수정 페이지에 접근하려고 하면 막히도록 시도했지만 실패했다ㅠ 그래도 들어가지더라ㅠ

계속 머리를 굴려본 결과 uid를 잘 이용해봐야겠다고 생각했다. 애초에 새 게시글을 작성해서 게시할 때 boardId에 사용자의 uid값을 함께 저장되도록 하였다.

const docRef = await addDoc(collection(database, "board"), {
    title:title,
    writer:`${userName.slice(0,1)}**`,
    content: content,
    date:getClock(),
    image:url ? url : null,
    modify:false,
    boardId: user.uid,  //👈
    listNumber: number+1,
    timestamp:Timestamp.now()
  })
  return docRef;

import { useAuthContext } from '../context/AuthContext';
import {Navigate, useParams} from 'react-router-dom';

export default function ProtectedRoute({children, requireUser}) {
  const {user, uid} = useAuthContext();
  const {boardId} = useParams();

  if(!user || (requireUser && (boardId !== uid))){
    return <Navigate to='/' replace={true}/>
  }
  return children;

}

그리고 URL을 통해 수정 페이지로 이동할때 boardId(user.uid)까지 입력해야하도록 지정한 다음 protectedRoute에서 useParams로 boardId를 가져왔다. 가져온 boardId(user.uid)와 현재 로그인 된 사용자의 uid가 일치하면 자식 컴포넌트를 렌더링한다.
if문 조건을 살펴보면!
로그인 된 사용자가 없는데 게시글 작성 페이지로 이동하려고 시도하거나 로그인된 사용자는 있는데 boardId와 uid가 일치하지 않는 경우 홈 페이지로 리다이렉트 되도록 해서 접근 경로를 보호했다. 이것도 꽤나 오래 걸렸다ㅠㅠ 몇 시간동안 해결을 못해서 답답했는데 의외로 단순하게 생각했을 때 해결법을 찾을 수 있었던 것 같다. 그래도 여러가지를 시도해보는 과정에서 배우는 것도 분명히 있다. 실패를 두려워하지말자! 실패를 겪었기 때문에 더 좋은 방법을 생각해낼 수 있었다고 생각한다. 비록 이게 정답이 아닐지라도!😚