처음에 고차컴포넌트 방식을 사용하여 시도했지만
리렌더링 문제, 고차컴포넌트에 대한 이해부족 등등으로
라이브러리를 사용하여 미들웨어를 구성하여 페이지 접근을 하기로함.
hook
import axios from "axios";
import { useEffect, useState } from "react";
function useAuth() {
const token = localStorage.getItem("TOKEN");
const username = localStorage.getItem("USER");
const fetchData = async () => {
const tokenValidity = await axios({
method: "get",
url: "인증요청 url",
responseType: "type",
headers: {
Authorization: token,
name: username,
},
})
.then((res) => {
return res.data.success;
})
.catch((err) => {
console.log(err);
});
return tokenValidity;
};
useEffect(() => {}, []);
const tokenValidity = fetchData();
return { data: tokenValidity };
}
export default useAuth;
해당 hook에서 return 된 값은 미들웨어로 넘어간다
변수나 state에 담아서 별도로 보내주고 싶었지만
값을 먼저 return 해버리는 바람에 프로미스객체 자체를 넘겨준다.
middleware
export default async function authGuard(to, from, next, { injectedValue }) {
const res = await injectedValue.data;
if (!localStorage.getItem("TOKEN") || !localStorage.getItem("USER"))
next("/login");
else if (res) {
// 로그인 상태에서 로그인페이지 접근제한
if (to.location.pathname === "/Login") {
next("/");
}
console.log("브라우저 토큰과 DB상의 유저토큰이 일치 => 페이지접근");
next();
} else if (!res) {
next("/LoginErr");
console.log("브브라우저 토큰과 DB상의 유저토큰이 불일치 => 리젝");
}
}
미들웨어 라는것이 이런것일까
이게 맞는 방법인가 문제점은 없는가 의문이든다
시간이나면 꼭 피드백을 받고싶다.