vue2_frontend init..

src/components/common/LoginComponent.vue

@@ -93,11 +93,14 @@ export default {
         // localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
         localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
         alert('로그인 성공...')
-        // this.$router.push('/')
+        console.log('로그인 성공...')
+        console.log(this.$router)
+        this.$router.push(this.$reouter.path)
       } else {
         console.log(result)
         localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
         alert('로그인 실패...')
+        this.$router.back()
       }
     },
     onReset() {

src/router/index.js

@@ -21,19 +21,20 @@ const routes = [
   },
   {
     path: '/login',
-    name: 'LoginComponent',
+    name: 'login',
     component: () =>
       import(
-        /* webpackChunkName: "api", webpackPrefetch:true */ '@/views/loginView.vue'
+        /* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/loginView.vue'
       )
   },
   {
     path: '/todo',
-    name: 'TodoListView',
+    name: 'todo',
     component: () =>
       import(
         /* webpackChunkName: "api", webpackPrefetch:true */ '@/views/todo/listView.vue'
-      )
+      ),
+    meta: { requiresAuth: true }
   }
 ]
 
@@ -43,4 +44,27 @@ const router = new VueRouter({
   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/
+// 로그인 처리 과정용
+// to : 이동할 url 정보가 담긴 라우터 객체
+// from : 현재 url 정보가 담긴 라우터 객체
+// next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
+//여기에서 login은 path가 아니라 name에서 찾는다
+router.beforeEach((to, from, next) => {
+  //routes 설정에서 meta: { requiresAuth: true } 가 선언된 경우
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
+    if (!localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
+      next({ name: 'login' })
+    } else {
+      console.log(from.path + " => 인증됨 => '" + to.path + "'")
+      next()
+    }
+  } else {
+    console.log(from.path + " => 인증않됨 => '" + to.path + "'")
+    next()
+  }
+})
+
 export default router

src/views/loginView.vue

@@ -1,9 +1,7 @@
 <template>
   <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
   <div>
-    <b-modal id="LoginComponent" title="로그인">
+    <LoginComponent />
-      <LoginComponent />
-    </b-modal>
   </div>
 </template>
 <script>
@@ -11,16 +9,6 @@ import LoginComponent from '@/components/common/LoginComponent.vue'
 export default {
   components: {
     LoginComponent
-  },
-  data: function () {
-    return {
-      showModal: true
-    }
-  },
-  mounted: function () {
-    if (this.showModal) {
-      this.$bvModal.show('LoginComponent')
-    }
   }
 }
 </script>