수정2...

.env

@@ -3,6 +3,7 @@
 
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+VUE_APP_AUTH_HOST="http://localhost:2000"
 
 VUE_APP_BACKEND_HOST="http://localhost:3000"
 VUE_APP_BACKEND_HEADERS_Content_Type="application/json;charset=utf-8"

src/components/common/LoginComponent.vue

@@ -89,12 +89,12 @@ export default {
       console.log(result)
       if (!result) {
         console.log(result)
-        localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+        sessionStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
         alert('로그인 실패...')
         //this.$router.back()
       } else {
         // localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
-        localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
+        sessionStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
         alert('로그인 성공...')
         //저장된 redirect path를 이용 이동시킴
         this.$router.replace(
@@ -121,17 +121,12 @@ export default {
     },
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
-      axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
+      axios.defaults.baseURL = process.env.VUE_APP_AUTH_HOST
       //전송 Header에 추가
       const headers = {
-        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
-        // 'Access-Control-Allow-Origin':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
-        // 'Access-Control-Allow-Methods':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
         Authorization:
           'Bearer ' +
-          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+          sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .post(url, params, headers)

src/components/todo/InputComponent.vue

@@ -142,14 +142,9 @@ export default {
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
       //전송 Header에 추가
       const headers = {
-        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
-        // 'Access-Control-Allow-Origin':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
-        // 'Access-Control-Allow-Methods':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
         Authorization:
           'Bearer ' +
-          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+          sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .post(url, params, headers)

src/components/todo/ListComponent.vue

@@ -363,14 +363,9 @@ export default {
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
       //전송 Header에 추가
       const headers = {
-        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
-        // 'Access-Control-Allow-Origin':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
-        // 'Access-Control-Allow-Methods':
-        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
         Authorization:
           'Bearer ' +
-          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+          sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .get(url, params, headers)

src/router/index.js

@@ -40,35 +40,41 @@ const routes = [
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  //base: process.env.BASE_URL,
   routes
 })
 
 // 참고 :
 // https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router
 // https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/
+// https://www.bottlehs.com/vue/vue-js-jwt-%EA%B8%B0%EB%B0%98-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%EC%A6%9D/
 // 로그인 처리 과정용
 // to : 이동할 url 정보가 담긴 라우터 객체
 // from : 현재 url 정보가 담긴 라우터 객체
 // next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
 //여기에서 login은 path가 아니라 name에서 찾는다
+//router.beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다
 router.beforeEach((to, from, next) => {
-  //routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우
+  console.log('라우딩 대기')
-  if (to.matched.some((record) => record.meta.requiredAuth)) {
+  //1. routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우
-    //localStorage에 Access-Token이 없으면 Login페이지로 전송
+  if (to.matched.some((routeRecord) => routeRecord.meta.requiredAuth)) {
-    if (!localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
+    //2. 로그인 인증 않된 경우
-      console.log(from.path + ' => 인증않됨 => Login 페이지 이동')
+    //sessionStorage Access-Token이 없으면 Login페이지로 전송
-      //다음 이동할 URL 저장
+    if (!sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
+      console.log(from.path + ' => 3. Login 페이지 이동 => 로그인 페이지')
+      //로그인 성공 후 이동할 URL 저장
       sessionStorage.setItem(
         process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME,
         to.path
       )
       next({ name: 'login' })
+    } else {
+      //3. 로그인 인증완료
+      console.log(from.path + ' => 2. 이미인증완료 => ' + to.path)
+      next()
     }
-    console.log(from.path + ' => 인증 통과 => ' + to.path)
-    next()
   } else {
-    console.log(from.path + ' => 인증요구없으므로 통과 => ' + to.path)
+    console.log(from.path + ' => 1. 인증요구 없음 => ' + to.path)
     next()
   }
 })