[TIL] 24/02/04 [최종] 비로그인시 URL 경로로 접근 차단 (Next.js 인듯 아닌듯)

오늘은 쉬었지만

어제 새벽에 한거랑 정리 좀..

1.  로그인 안 했을  때 URL로 접근 하는 것 차단하기

React 에서 로그인 경로 차단 했던 방법 : 로컬스토리지 & 리덕스 로그인 state & 라우팅 차단

https://developer.happymunzi.com/41 

 

<현재 로그인 상태 판단 방식>

지금의 프로젝트에서는 supabse의 onAuthStateChange를 사용하여 유저의 로그인 상태를 서버에서 감시하고,

페이지 공용 layout 으로 적용한 header component의 useEffect 에서 상태를 감시하고
로그인 시에는 db에서 user 정보를 읽어와 zustand로 저장하여 전역관리 하고있다.

어떤 페이지에서 새로고침 하더라도 로그인 상태를 다시 읽어오기때문에 로컬 스토리지를 쓰고 있지 않는데..

 

페이지 URL 경로로의 접근을 막기 위해서 아래와 같은 코드를 작성했는데 문제가 생겼다.

URL 차단이 필요한 write 페이지 : 

"use client"
import React, { useEffect } from "react"
import Editor from "./_components/Editor"
import useUserStore from "@/store/user"
import { useRouter } from "next/navigation"
import useLoginConfirmModal from "@/hooks/useLoginConfirmModal"

const WritePage = () => {
  const user = useUserStore((state) => state.user)
  const openLoginConfirmModal = useLoginConfirmModal()
  const router = useRouter()

  useEffect(() => {
    if (user === null) {
      openLoginConfirmModal()
      router.replace("/")
    }
  }, [user])

  return <>{user && <Editor />}</>
}

export default WritePage

 

로그인 상태를 판단하는 state가 null인 기간이 있는 것이다.

(zustand로 저장하고 있는 user가 header component가 렌더링이 완료되기 전까지는 null 인 문제로..)

사실 여태 다른부분에서 문제가 안되었던 것은, 안보여주다가 보여주면 그만이기 때문이었다.

새로고침하더라도 마이프로필 사진이 안보이다가 렌더링이 완료되었을때 보이면 되는 일이었다. >.<

하지만 여기서는 user가 없을 경우 로그인하시겠냐는, confirm 창을 띄워주려고 하기때문에

로그인 상태이더라도 새로고침 하자마자 confirm 창이 뜨는 것이다.

 

supabse에서는 로그인시에 유저토큰을 로컬스토리지에 항상 저장을 해주기 때문에
가져다 쓰는 건 일이 아닌데 기분이가 나쁘다는 것.. 'ㅇ';;

임시방편: 

"use client"
import React, { useEffect, useState } from "react"
import Editor from "./_components/Editor"
import { useRouter } from "next/navigation"
import useLoginConfirmModal from "@/hooks/useLoginConfirmModal"

const WritePage = () => {
  const openLoginConfirmModal = useLoginConfirmModal()
  const router = useRouter()
  const [isLogin, setIsLogin] = useState(false)

  useEffect(() => {
    const accessToken = localStorage.getItem(
      process.env.NEXT_PUBLIC_AUTH_TOKEN as string,
    )
    if (accessToken === null) {
      openLoginConfirmModal()
      router.replace("/")
    } else {
      setIsLogin(true)
    }
  }, [])

  return <>{isLogin && <Editor />}</>
}

export default WritePage

 

더 좋은 방법은 없을까 ?

고민하는 중

middleware 나 intercept 뭐 있던데.. 어떻게 안될까..