localstorage로 부터 authority를 받아 해당 authority에 맞게 렌더링 하도록 구현
<Redirect> : 로그인 시도 후에 권한 설정 및 accessToken과 refreshToken을 받는 곳
import React, { useEffect } from "react";
import queryString from "query-string";
import { useNavigate } from "react-router-dom";
const Redirect = () => {
const navigate = useNavigate();
const token = queryString.parse(window.location.search); //yarn add query-string
useEffect(() => {
if (token) {
localStorage.setItem("Tnut's accessToken", token.accessToken);
localStorage.setItem("Tnut's refreshToken", token.refreshToken);
fetch("http://localhost:8080/authority", {
headers: {
AccessToken: localStorage.getItem("Tnut's accessToken"),
},
})
.then((res) => res.json())
.then((res) => {
console.log(res);
localStorage.setItem("authority", res.data);
});
setInterval(() => {
console.log("setInterval 작동함");
//로그인 시 29분 간격으로 accessToken 재발급
fetch("http://localhost:8080/refresh", {
//access토큰이 만료되었을 경우(다양한 경우가 있지만 일단은)
method: "post",
headers: {
"Content-Type": "applicaiton/json; charset=utf-8",
RefreshToken: localStorage.getItem("Tnut's refreshToken"),
},
})
.then((res) => res.json())
.then((res) => {
if (res.status === 200) {
localStorage.setItem("Tnut's accessToken", res.data); //access토큰을 새로 발급
} else if (res.status === 401) {
clearInterval(setInterval); //refreshToken 만료 시 재발급 중지
alert("로그인 만료, 재 로그인 해주세요");
}
});
}, 1000 * 60 * 29);
setTimeout(() => {
window.location.reload();
}, 100);
navigate("/login");
} else {
navigate("/");
}
});
return <div></div>;
};
export default Redirect;
<boardItem>
{authority === "ROLE_TNUT" ? (
<Link to={"/board/content/" + id} className="btn btn-secondary">
상세보기
</Link>
) : (
<Link
to={"/user/board/content/" + id}
className="btn btn-secondary"
>
상세보기
</Link>
)}
과 같이 설정하면 authority에 따라 설정 가능
<결과>
728x90
반응형
'개인 프로젝트 > 블로그' 카테고리의 다른 글
대대ㅅ댓..글 구현(save) (2) | 2022.07.25 |
---|---|
jpa 대댓글 삭제에 대한 고민 (0) | 2022.07.24 |
jwt를 이용한 조건부 렌더링 처리 고민 (0) | 2022.07.19 |
springSecruty+JWT+react+Oauth2 (0) | 2022.07.18 |
springSecruty+JWT+react+Oauth2 (react) (0) | 2022.07.18 |