Vue2_Frontend 수정1...

.env

@@ -10,4 +10,4 @@ VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin="*"
 
 #LocalStorage는 Edge 브라우저의 개발툴 > 응용프로그램 > 로컬 저장소에서 확인가능
 VUE_APP_LOCALSTORAGE_NAME="access_token"
-
+VUE_APP_SESSIONSTORAGE_REDIRECT_NAME = "RedirectPATH"

src/components/common/LoginComponent.vue

@@ -82,43 +82,51 @@ export default {
       return dirty || validated ? valid : null
     },
     async onSubmit() {
-      const result = await this.callAPI(
+      const result = await this.callAPI('/auth/login', {
-        '/auth/login',
+        email: this.form.email,
-        JSON.stringify({
+        password: this.form.password
-          email: this.form.email,
+      })
-          password: this.form.password
+      console.log(result)
-        })
+      if (!result) {
-      )
-      if (result.access_token) {
-        // localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
-        localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
-        alert('로그인 성공...')
-        console.log(this.$router)
-        //this.$router.push(this.$router.path)
-      } else {
         console.log(result)
         localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
         alert('로그인 실패...')
-        this.$router.back()
+        //this.$router.back()
+      } else {
+        // localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
+        localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
+        alert('로그인 성공...')
+        //저장된 redirect path를 이용 이동시킴
+        this.$router.replace(
+          sessionStorage.getItem(
+            process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME
+          )
+        ) || '/'
+        //저장된 정보 CLear
+        this.onReset()
       }
     },
     onReset() {
       // Reset our form values
       this.form.email = ''
       this.form.pasword = ''
+      //저장된 redirect path Clear
+      sessionStorage.removeItem(
+        process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME
+      )
       // Trick to reset/clear native browser form validation state
-      this.$nextTick(() => {
+      // this.$nextTick(() => {
-        this.$refs.observer.reset()
+      //   this.$refs.observer.reset()
-      })
+      // })
     },
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
       //전송 Header에 CORP정보 추가
-      // axios.defaults.headers.post['Content-Type'] =
+      axios.defaults.headers.post['Content-Type'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Content_Type
+        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      // axios.defaults.headers.post['Access-Control-Allow-Origin'] =
+      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
+        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       return await axios
         .post(url, params)
         .then((response) => {

src/components/todo/InputComponent.vue

@@ -141,10 +141,10 @@ export default {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
       //전송 Header에 CORP정보 추가
-      // axios.defaults.headers.post['Content-Type'] =
+      axios.defaults.headers.post['Content-Type'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Content_Type
+        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      // axios.defaults.headers.post['Access-Control-Allow-Origin'] =
+      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
+        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       //전송 Header에 인증키 추가
       const headers = {
         // Authorization:

src/components/todo/ListComponent.vue

@@ -54,6 +54,7 @@
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"
           :sort-direction="sortDirection"
+          @sort-changed="sortClick"
           label-sort-asc=""
           label-sort-desc=""
           label-sort-clear=""
@@ -65,6 +66,7 @@
           :no-border-collapse="commonTableAttributes.noBorderCollapse"
           :striped="commonTableAttributes.striped"
           :hover="commonTableAttributes.hover"
+          :no-local-sorting="commonTableAttributes.noLocalSorting"
           :bordered="commonTableAttributes.bordered"
           :dark="commonTableAttributes.dark"
           :head-variant="commonTableAttributes.headVariant"
@@ -86,7 +88,7 @@
           </template>
           <!-- 제목부분 출력용 -->
           <template #cell(title)="row">
-            {{ row.item.title }}
+            {{ row.item.title }}[{{ row.item.id }}]
           </template>
           <!-- 상세 내용 출력용 -->
           <template #cell(content)="row">
@@ -203,6 +205,7 @@ export default {
         //noBorderCollapse: false,
         striped: true,
         hover: true,
+        noLocalSorting: true,
         bordered: true,
         dark: false,
         headVariant: 'light'
@@ -237,7 +240,7 @@ export default {
       const results = await this.callAPI('/todo', {
         params: {
           sortBy: this.sortBy,
-          sortDirection: this.sortDirection,
+          sortDesc: this.sortDesc,
           searchFields: this.searchFields,
           search: this.search,
           page: page,
@@ -249,6 +252,8 @@ export default {
       this.total = results.total
       this.perPage = results.perPage
       this.currentPage = results.page
+      this.sortBy = results.sortBy
+      this.sortDesc = results.sortDesc === 'true' ? true : false
       this.rows = results.rows
       this.isBusy = false
     },
@@ -265,6 +270,12 @@ export default {
       console.log(this.perPage)
       this.getDatas()
     },
+    sortClick(event) {
+      console.log(event)
+      this.sortBy = event.sortBy
+      this.sortDesc = event.sortDesc
+      this.getDatas()
+    },
     busyToggle() {
       this.isBusy = !this.isBusy
     },
@@ -291,10 +302,10 @@ export default {
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
-      // axios.defaults.headers.post['Content-Type'] =
+      axios.defaults.headers.post['Content-Type'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Content_Type
+        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      // axios.defaults.headers.post['Access-Control-Allow-Origin'] =
+      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-      //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
+        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       return await axios
         .get(url, params)
         .then((response) => {

src/router/index.js

@@ -58,6 +58,11 @@ router.beforeEach((to, from, next) => {
     //localStorage에 Access-Token이 없으면 Login페이지로 전송
     if (!localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
       console.log(from.path + ' => 인증않됨 => Login 페이지 이동')
+      //다음 이동할 URL 저장
+      sessionStorage.setItem(
+        process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME,
+        to.path
+      )
       next({ name: 'login' })
     }
     console.log(from.path + ' => 인증 통과 => ' + to.path)