useLocation() - 현재 위치가 바뀌는 경우

사용자가 로그인을 한 경우 다른 url로 옮겨 갔을때

해당 사용자 정보가 맞는지 또는 세션이 끊겼는지 안끊겼는지를 알아야 한다. (세션을 추적)

 

그럴 때 react에서는 useLoaction을 통해 현재 위치가 그대로인지 옮겼는지를 알 수 있다.

 

예시) 

// 로그인시 로그인 유저의 세션 정보를 가져와 권한같은걸 확인 또는 로그인 유무 여부 확인
function LoginProvider({ children }) {
  const [login, setLogin] = useState("");

  console.log(login);

  useEffect(() => {
    fetchLogin();
  }, []);

  // 로그인 경로
  function fetchLogin() {
  	// 성공하면 login 안에 세션정보를 넣어준다
    axios.get("/api/member/login").then((res) => setLogin(res.data));
  }

  function isAuthenticated() {
    return login !== "";
  }

  function isAdmin() {
    if (login.auth) {
      return login.auth.some((elem) => elem.name === "admin");
    }
    return false;
  }

  // function isManager(){
  //   return login.auth.some((elem) => elem.name === "manager");
  // }
  //
  // function hasAuth(auth){
  //   return login.auth.some((elem) => elem.name === auth);
  // }

  function hasAccess(userId) {
    return login.id === userId;
  }

  return (
    <LoginContext.Provider
      value={{ login, fetchLogin, isAuthenticated, hasAccess, isAdmin }}
    >
      {children}
    </LoginContext.Provider>
  );
}

 

 

네비게이션을 통해 url을 이동하기때문에 useLocation으로 움직임을 감지

export function NavBar() {
  const { fetchLogin, login, isAuthenticated, isAdmin } =
    useContext(LoginContext);
  const toast = useToast();
  const navigate = useNavigate();

  const urlParams = new URLSearchParams();
	
  const location = useLocation();
  
  // 처음 컴포넌트 그려질 때 fetchLogin()을 통해 세션정보를 가져와서 있는지 없는지 유무확인으로 
  // 로그인 했는지 안했는지 확인
  // useLocation을 통해 현재 위치에서 다른 위치로 옮겨갈 때 마다 useEffect 작동시켜서
  // 위치 옮길때마다 유저정보 유무 확인
  useEffect(() => {
    fetchLogin();
  }, [location]);
  
  if (login !== "") {
    urlParams.set("id", login.id);
  }

  function handleLogout() {
    axios
      .post("/api/member/logout")
      .then(() => console.log("로그아웃 성공"))
      .then(() => {
        toast({
          description: "로그아웃 되었습니다.",
          status: "info",
        });
        navigate("/");
      });
  }

  return (
    <Flex>
      <Button onClick={() => navigate("/")}>메인</Button>
      {isAuthenticated() && (
        <Button onClick={() => navigate("/write")}>글 쓰기</Button>
      )}
      {isAuthenticated() || (
        <Button onClick={() => navigate("/signup")}>가입하기</Button>
      )}
      {isAdmin() && (
        <Button onClick={() => navigate("/member/list")}>회원목록</Button>
      )}
      {isAuthenticated() && (
        <Button onClick={() => navigate("/member?" + urlParams.toString())}>
          회원 정보
        </Button>
      )}
      {isAuthenticated() || (
        <Button onClick={() => navigate("/login")}>로그인</Button>
      )}

      {isAuthenticated() && <Button onClick={handleLogout}>로그아웃</Button>}
    </Flex>
  );
}