Commit @cdaa6b6bb0d36c8ff72154181397030e9f8d80f0

e0cdf00

cdaa6b6

client/resources/api/index.js

--- client/resources/api/index.js

+++ client/resources/api/index.js


 
 async function refreshAccessToken() {
     try {
-        const refreshToken = store.state.refreshToken; // 스토어에서 리프레시 토큰 가져오기
+        const refreshToken = store.state.authorization; // 스토어에서 리프레시 토큰 가져오기
         
         // 리프레시 토큰을 포함하여 재발급 요청
-        const res = await axios.post('/refresh/tknReissue.json', {
-            refreshToken: refreshToken // 리프레시 토큰 본문에 포함
+        const res = await axios.post('/refresh/tknReissue.json', {}, {
+            withCredentials: true // 쿠키를 요청에 포함시키기 위한 옵션
         });
 
         if (res.headers.authorization) {

e0cdf00

cdaa6b6

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


     <header>
         <div class="header-container w1500">
             <div class="logo-wrap">
-                <router-link :to="{path : '/'}" class="logo"><img :src="logo" alt=""></router-link>
+                <router-link :to="{ path: '/' }" class="logo"><img :src="logo" alt=""></router-link>
             </div>
             <div class="nav-wrap">
                 <nav>

                         <li>회원관리</li>
                         <li>카테고리 관리</li>
                     </ul>
-                </nav>                
+                </nav>
             </div>
             <div class="auth-area">
-                <ul>
+                <ul v-if="$store.state.userId != null">
                     <li><img src="../../resources/images/icon/user-settings-line.png" alt="">
-                        <router-link :to="{path : '/MyInfo.page'}">관리자</router-link></li>
+                        <router-link :to="{ path: '/MyInfo.page' }">{{ $store.state.userNm }}</router-link>
+                    </li>
                     <li>
                         <div class="line"></div>
                     </li>
                     <li><img src="../../resources/images/icon/logout-box-line.png" alt="">
-                        <router-link :to="{path : '/Login.page'}">로그인</router-link>
-                        </li>
+                        <a href="#" @click.prevent="logout">로그아웃</a>
+                    </li>
                 </ul>
                 <a href="#" class="all-menu"><img src="../../resources/images/allmenu.png" alt=""></a>
             </div>

     </header>
 </template>
 <script>
-    export default {
+export default {
     data() {
         return {
-        // Define the image sources
-        logo: 'client/resources/images/logo.png',
+            // Define the image sources
+            logo: 'client/resources/images/logo.png',
         };
-    }
-    };
+    },
+    methods: {
+        logout() {
+            this.$store.commit('setStoreReset'); // 로그아웃 뮤테이션 호출
+            this.isUserNm = null; // 사용자 이름 초기화
+            this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
+        }
+    },
+    watch: {},
+    computed: {},
+    components: {},
+    mounted() { },
+};
 </script>

e0cdf00

cdaa6b6

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import NotFound from "./etc/NotFound.vue";
 
 const routes = [
-  { path: "/", name: "MainPage", component: Main },
+  { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
   { path: "/Login.page", name: "Login", component: Login },
-  { path: "/MyInfo.page", name: "MyInfo", component: MyInfo },
+  { path: "/MyInfo.page", name: "MyInfo", component: MyInfo, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
   { path: "/notFound.page", name: "NotFoundPage", component: NotFound },
 ];
 

 
 AppRouter.beforeEach((to, from, next) => {
   const routeExists = AppRouter.getRoutes().some(route => route.path === to.path || (route.name && route.name === to.name));
-  const authorState = store.state.roles;
+  const userId = store.state.userId;
   const { authorization } = to.meta;
 
-  // 토큰이 없을 경우
-  if (authorState == null && to.path != '/login.page') {
+  // 로그인 상태 확인
+  const isLoggedIn = userId;
+
+  // 로그인되지 않은 경우
+  if (isLoggedIn == null && to.path !== '/Login.page') {
     alert('로그인이 필요합니다.');
-    return next('/login.page');
+    return next('/Login.page'); // 로그인 페이지로 리다이렉트
   }
+  
   // 권한이 없을 경우
   if(authorization){
-    if(!authorization.includes(authorState[0].authority)){
+    if(!authorization.includes(store.state.roles[0].authority)){
       alert('접근 권한이 없습니다.');
       return next(from.path);
     }

e0cdf00

cdaa6b6

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


   state: {
     authorization: null,
     // refresh: null,
-    roles: [{authority: "ROLE_USER"}],
+    roles: [],
   },
   getters: {
     getAuthorization: function () {},

       // state.refresh = null;
       state.userNm = null;
       state.userId = null;
-      state.roles = [{authority: "ROLE_USER"}];
+      state.roles = [];
     },
   },
   actions: {

...	...	@@ -17,11 +17,11 @@
17	17
18	18	async function refreshAccessToken() {
19	19	try {
20		- const refreshToken = store.state.refreshToken; // 스토어에서 리프레시 토큰 가져오기
	20	+ const refreshToken = store.state.authorization; // 스토어에서 리프레시 토큰 가져오기
21	21
22	22	// 리프레시 토큰을 포함하여 재발급 요청
23		- const res = await axios.post('/refresh/tknReissue.json', {
24		- refreshToken: refreshToken // 리프레시 토큰 본문에 포함
	23	+ const res = await axios.post('/refresh/tknReissue.json', {}, {
	24	+ withCredentials: true // 쿠키를 요청에 포함시키기 위한 옵션
25	25	});
26	26
27	27	if (res.headers.authorization) {

...	...	@@ -8,9 +8,9 @@
8	8	import NotFound from "./etc/NotFound.vue";
9	9
10	10	const routes = [
11		- { path: "/", name: "MainPage", component: Main },
	11	+ { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
12	12	{ path: "/Login.page", name: "Login", component: Login },
13		- { path: "/MyInfo.page", name: "MyInfo", component: MyInfo },
	13	+ { path: "/MyInfo.page", name: "MyInfo", component: MyInfo, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
14	14	{ path: "/notFound.page", name: "NotFoundPage", component: NotFound },
15	15	];
16	16
...	...	@@ -25,17 +25,21 @@
25	25
26	26	AppRouter.beforeEach((to, from, next) => {
27	27	const routeExists = AppRouter.getRoutes().some(route => route.path === to.path \|\| (route.name && route.name === to.name));
28		- const authorState = store.state.roles;
	28	+ const userId = store.state.userId;
29	29	const { authorization } = to.meta;
30	30
31		- // 토큰이 없을 경우
32		- if (authorState == null && to.path != '/login.page') {
	31	+ // 로그인 상태 확인
	32	+ const isLoggedIn = userId;
	33	+
	34	+ // 로그인되지 않은 경우
	35	+ if (isLoggedIn == null && to.path !== '/Login.page') {
33	36	alert('로그인이 필요합니다.');
34		- return next('/login.page');
	37	+ return next('/Login.page'); // 로그인 페이지로 리다이렉트
35	38	}
	39	+
36	40	// 권한이 없을 경우
37	41	if(authorization){
38		- if(!authorization.includes(authorState[0].authority)){
	42	+ if(!authorization.includes(store.state.roles[0].authority)){
39	43	alert('접근 권한이 없습니다.');
40	44	return next(from.path);
41	45	}

...	...	@@ -7,7 +7,7 @@
7	7	state: {
8	8	authorization: null,
9	9	// refresh: null,
10		- roles: [{authority: "ROLE_USER"}],
	10	+ roles: [],
11	11	},
12	12	getters: {
13	13	getAuthorization: function () {},
...	...	@@ -36,7 +36,7 @@
36	36	// state.refresh = null;
37	37	state.userNm = null;
38	38	state.userId = null;
39		- state.roles = [{authority: "ROLE_USER"}];
	39	+ state.roles = [];
40	40	},
41	41	},
42	42	actions: {

Delete comment