jwt토큰 만료 로그아웃동작 추가
All checks were successful
Build And Test / build-and-push (push) Successful in 1m11s

This commit is contained in:
2025-05-28 13:05:48 +09:00
parent 1fb919a328
commit 210bf24e45
9 changed files with 58 additions and 20 deletions

View File

@ -1,6 +1,8 @@
// src/api/todoApi.js
import axios from 'axios';
import { attachAuthInterceptors } from './attachInterceptors';
import { createApi } from './createApi';
export const initAnsibleApi = (logout) => createApi(process.env.REACT_APP_API_ANSIBLE, logout);
const ansibleApi = axios.create({
baseURL: process.env.REACT_APP_API_ANSIBLE,

View File

@ -1,6 +1,8 @@
// src/api/authApi.js
import axios from "axios";
import { attachAuthInterceptors } from "./attachInterceptors";
import { createApi } from './createApi';
export const initAuthApi = (logout) => createApi(process.env.REACT_APP_API_AUTH, logout);
const authApi = axios.create({
baseURL: process.env.REACT_APP_API_AUTH,

View File

@ -1,6 +1,8 @@
// src/api/blogApi.js
import axios from 'axios';
import { attachAuthInterceptors } from './attachInterceptors';
import { createApi } from './createApi';
export const initBlogApi = (logout) => createApi(process.env.REACT_APP_API_BLOG, logout);
const blogApi = axios.create({
baseURL: process.env.REACT_APP_API_BLOG,

View File

@ -1,5 +1,8 @@
// src/api/boardApi.js
import axios from "axios";
import { attachAuthInterceptors } from "./attachInterceptors";
import { createApi } from './createApi';
export const initBoardApi = (logout) => createApi(process.env.REACT_APP_API_BOARD, logout);
const boardApi = axios.create({
baseURL: process.env.REACT_APP_API_BOARD, // ex) http://localhost:8801/api

14
src/api/createApi.js Normal file
View File

@ -0,0 +1,14 @@
// src/api/createApi.js
import axios from 'axios';
import { attachAuthInterceptors } from './attachInterceptors';
export const createApi = (baseURL, logout = null) => {
const instance = axios.create({
baseURL,
headers: { 'Content-Type': 'application/json' },
});
attachAuthInterceptors(instance, logout);
return instance;
};

View File

@ -1,6 +1,8 @@
// src/api/todoApi.js
import axios from 'axios';
import { attachAuthInterceptors } from './attachInterceptors';
import { createApi } from './createApi';
export const initTodoApi = (logout) => createApi(process.env.REACT_APP_API_TODO, logout);
const todoApi = axios.create({
baseURL: process.env.REACT_APP_API_TODO,

View File

@ -1,3 +1,4 @@
// src/api/tokenUtils.js
import axios from 'axios';
export const refreshAccessToken = async () => {

View File

@ -1,36 +1,48 @@
// src/context/AuthContext.js
// ✅ 8. src/context/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { decodeToken } from '../utils/jwt'; // ✅ JWT 디코딩 유틸 사용
import { decodeToken } from '../utils/jwt';
import { initAuthApi } from '../api/authApi';
import { initBlogApi } from '../api/blogApi';
import { initBoardApi } from '../api/boardApi';
import { initTodoApi } from '../api/todoApi';
import { initAnsibleApi } from '../api/ansibleApi';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState(null); // ✅ 추가
const [user, setUser] = useState(null);
useEffect(() => {
const token = localStorage.getItem('access');
if (token) {
const decoded = decodeToken(token); // payload 추출
setUser(decoded);
setIsLoggedIn(true);
}
}, []);
const logout = () => {
localStorage.removeItem('access');
localStorage.removeItem('refresh');
setUser(null);
setIsLoggedIn(false);
};
const login = (tokenObj) => {
localStorage.setItem('access', tokenObj.access);
localStorage.setItem('refresh', tokenObj.refresh);
const decoded = decodeToken(tokenObj.access);
setUser(decoded); // ✅ 로그인 시 user 저장
setUser(decoded);
setIsLoggedIn(true);
};
const logout = () => {
localStorage.removeItem('access');
localStorage.removeItem('refresh');
setUser(null); // ✅ 로그아웃 시 제거
setIsLoggedIn(false);
};
useEffect(() => {
const token = localStorage.getItem('access');
if (token) {
const decoded = decodeToken(token);
setUser(decoded);
setIsLoggedIn(true);
}
// ✅ API 초기화 시 logout 주입
initAuthApi(logout);
initBlogApi(logout);
initBoardApi(logout);
initTodoApi(logout);
initAnsibleApi(logout);
}, []);
return (
<AuthContext.Provider value={{ isLoggedIn, login, logout, user }}>
@ -39,4 +51,4 @@ export const AuthProvider = ({ children }) => {
);
};
export const useAuth = () => useContext(AuthContext);
export const useAuth = () => useContext(AuthContext);

View File

@ -1 +1 @@
0.0.17-rc2
0.0.17-rc3