From e023561baaeef46f0055920b9bbcad13d8da6b2d Mon Sep 17 00:00:00 2001
From: jihyun jo <jihyun.jo@iarkdata.com>
Date: Wed, 7 Feb 2024 18:04:33 +0900
Subject: [PATCH] loworking on login

---
 src/components/auth/Login.vue |  34 +++---
 src/store/store.js            | 201 ++++++++++++++--------------------
 src/views/Summery.vue         |  51 ++++-----
 3 files changed, 120 insertions(+), 166 deletions(-)

diff --git a/src/components/auth/Login.vue b/src/components/auth/Login.vue
index 39708e1..5d0b852 100644
--- a/src/components/auth/Login.vue
+++ b/src/components/auth/Login.vue
@@ -2,32 +2,37 @@
 
 export default {
   name: "Login",
-  data(){
-    return{
+  data() {
+    return {
       // id 반드시 5자리 이상 20 이하일때만 정상처리
-      id:"",
-      password:"",
-      rememberMe:false
+      id: "",
+      password: "",
     }
   },
 
 
-  methods:{
+  methods: {
     async login() {
 
-      await this.$store.dispatch('getUser',{
-        id:this.id,
-        password:this.password,
-        rememberMe:this.rememberMe
+      await this.$store.dispatch('getUser', {
+        id: this.id,
+        password: this.password,
       });
-      },
+
+      // 이제 이 localstorage user 값을 store 에 저장
+      if (localStorage.getItem('loginInfo') != null) {
+        const localData = localStorage.getItem('loginInfo');
+        console.log("localData" + localData);
+        await this.$store.dispatch('setUserData', localData);
+      }
+    },
 
     async logout() {
       await this.$store.dispatch('clearUser');
     },
 
-    },
-  }
+  },
+}
 </script>
 
 <template>
@@ -35,9 +40,6 @@ export default {
     <input type="text" v-model="id" placeholder="ID">
     <input type="password" v-model="password" placeholder="Password">
 
-<!--    자동 로그인 버튼-->
-    <label for="rememberMe">로그인 유지</label>
-    <input type="checkbox" id="rememberMe" v-model="rememberMe" />
 
     <button type="submit">Login</button>
   </form>
diff --git a/src/store/store.js b/src/store/store.js
index 0bb9883..57317b4 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -4,145 +4,104 @@ import CryptoJS from "crypto-js";
 import router from '@/router';
 
 const store = createStore({
-    state() {
-        return {
-            user: {},
-            tableColumns: [
-                // store 에 저장 : 변하지 않을 값, 여러번 참조할
-                "moduleName",
-                "moduleType",
-                "tableName",
-                "tableMap",
-                "insert",
-                "update",
-                "delete",
-                "discard",
-                "filtered"
-            ],
-            moduleColumns: [
-                {name: "All", value: ""},
-                {name: "Extract", value: "Extract"},
-                {name: "Send", value: "Send"},
-                {name: "Post", value: "Post"}
-            ],
-            // 로그인 정보 저장
-            login: {
-                isLoggedIn: false,
-                token: "",
-            },
-        }
-    },
-    actions: {
-
-        async getUser(store, {id, password, rememberMe}) {
-
-            const passwordHash = CryptoJS.SHA256(password).toString().toUpperCase()
-            console.log(passwordHash)
-            const loginData = {
-                id: id,
-                password: passwordHash
+        state() {
+            return {
+                user: {},
+                tableColumns: [
+                    // store 에 저장 : 변하지 않을 값, 여러번 참조할
+                    "moduleName",
+                    "moduleType",
+                    "tableName",
+                    "tableMap",
+                    "insert",
+                    "update",
+                    "delete",
+                    "discard",
+                    "filtered"
+                ],
+                moduleColumns: [
+                    {name: "All", value: ""},
+                    {name: "Extract", value: "Extract"},
+                    {name: "Send", value: "Send"},
+                    {name: "Post", value: "Post"}
+                ],
             }
-            const response = await login(loginData);
-            console.log("response : " + response)
-
-            if (response) {
-                this.commit("setUserData", response.data.data.user);
-                console.log("스토어로 로그인에 성공");
-
-
-                // 로그인 정보 저장
-                if (rememberMe) {
-                    const loginInfo = {
-                        id: id,
-                        password: passwordHash,
-                        rememberMe: rememberMe
-                    };
-                    console.log("loginInfo : " + loginInfo)
-                    // localStorage 에 저장
-                    const loginInfoStr = JSON.stringify(loginInfo);
-                    await localStorage.setItem('loginInfo', loginInfoStr);
-                    console.log("loginInfoStr : " + loginInfoStr)
+        },
+        actions: {
 
+            async getUser(store, {id, password}) {
 
+                const passwordHash = CryptoJS.SHA256(password).toString().toUpperCase()
+                console.log(passwordHash)
+                const loginData = {
+                    id: id,
+                    password: passwordHash
                 }
-                // JWT 토큰 저장 : undefined : token 을 headers 에 보지는 못하는것 같음
-                // 토큰 저장: 로그인 성공 시 응답에서 JWT 토큰을 가져와 localStorage에 저장해야 합니다.
-                const token = response.headers.get('Authorization');
-                // undefined 가 뜨는 이유
-                if (token) {
-                    localStorage.setItem('token', token)
-                    store.commit('login')
-                }
-                console.log(token);
+                const response = await login(loginData);
+                console.log("response : " + response)
 
+                if (response) {
+                    this.commit("setUserData", response.data.data.user);
+                    console.log("스토어로 로그인에 성공");
 
-                router.push('/Summery');
+                    // 로그인 정보 저장
+                    // response.data.data.user 데이터 전체를 localstorage 에 넣기
+                    const loginInfoStr = JSON.stringify(response.data.data.user);
+                    await localStorage.setItem('loginInfo', loginInfoStr);
+                    console.log("loginInfoStr : " + loginInfoStr)
 
-            } else {
-                console.log("스토어로 로그인에 실패");
-                router.push('/error')
-            }
+                    // 이제 이 localstorage user 값을 store 에 저장
+                    if(localStorage.getItem('loginInfo') != null){
+                        const localData = localStorage.getItem('loginInfo');
+                        console.log("localData" + localData)
+                    }
 
-        },
-        // getLocalstorage(){
-        //     // 토큰이 존재하면 store.commit('login') 을 호출하여 로그인 상태 전환
-        //     const token = localStorage.getItem('token');
-        //     console.log(token);
-        //     if (token) {
-        //         store.commit('login')
-        //     }
-        // },
+                    router.push('/Summery');
 
+                } else {
+                    console.log("스토어로 로그인에 실패");
+                    router.push('/error')
+                }
+
+            },
 
-        async clearUser() {
-            const response = await logout();
+            async clearUser() {
+                const response = await logout();
 
-            console.log(response)
+                console.log(response)
 
-            if (response.status === 200) {
-                this.commit("setUserData", {});
-                console.log("로그아웃 성공");
-                router.push('/login')
-            } else {
-                console.log("로그아웃 실패");
-                router.push('/error')
+                if (response.status === 200) {
+                    this.commit("setUserData", {});
+                    console.log("로그아웃 성공");
+                    router.push('/login')
+                } else {
+                    console.log("로그아웃 실패");
+                    router.push('/error')
+                }
             }
-        }
 
 
-    },
+        },
+
+        // accessToken getters 에 담아서 꺼내쓰기
+        // getters: {
+        //   getAccessToken() {
+        //       return this.state.user.info.accessToken
+        //   }
+        // },
 
-    // accessToken getters 에 담아서 꺼내쓰기
-    // getters: {
-    //   getAccessToken() {
-    //       return this.state.user.info.accessToken
-    //   }
-    // },
+        mutations:
+            {
+                setUserData(state, userData) {
+                    state.user = userData;
+                }
+                ,
 
-    mutations: {
-        setUserData(state, userData) {
-            state.user = userData
-        },
+            }
+        ,
 
-        login(state) {
-            state.isLoggedIn = true;
-        },
-        logout(state) {
-            state.isLoggedIn = false;
-        },
-        // setToken(state, token) {
-        //     state.token = token;
-        // }
-
-
-    },
-    created() {
-        const token = localStorage.getItem('token');
-        if (token) {
-            this.commit("login");
-        }
-    },
-});
+    })
+;
 
 
 export default store;
\ No newline at end of file
diff --git a/src/views/Summery.vue b/src/views/Summery.vue
index 16e8d7c..b55be1d 100644
--- a/src/views/Summery.vue
+++ b/src/views/Summery.vue
@@ -8,10 +8,8 @@ export default {
       pipelineList: [],
       tableList: [], // 원본 데이터 유지
       pipelineFilter: [],
-      tableListFilter:[], // 필터된 데이터 테이블에 출력
-      // watch 로 변경 감시할 예정
+      tableListFilter: [], // 필터된 데이터 테이블에 출력
       // 추후 기본값은 all 으로 설정예정
-      // null 값을 넣을시 incluedes 에러가 난다
       pipelineSelected: [],
       moduleFilter: ""
     }
@@ -23,6 +21,7 @@ export default {
     },
 
     getFilter() {
+      // 파이프라인 필터의 목록을 표기해준다.
       this.pipelineFilter = this.pipelineList.map(item => ({name: item.name, key: item.key}));
       console.log(this.pipelineFilter)
 
@@ -41,7 +40,6 @@ export default {
       }
     },
 
-    // click 이벤트로 받은 선택된 값을 pipelinekey 로 바로 변경적용시킴 => 필터링으로 변경
     setPipelineSelected(pipelineKey) {
       // 이미 선택된 값인지 확인
       const isAlreadySelected = this.pipelineSelected.includes(pipelineKey);
@@ -52,44 +50,37 @@ export default {
         return;
       }
 
-      // 새로운 값 추가
-      // watch 에서 push 안먹히는 이유 찾기 (제거는 먹힘) : watch 는 배열을 인식못하고 option 을 줘야 인식함
+      // 새로운 값이면 추가
       this.pipelineSelected.push(pipelineKey);
 
-      // tableList
-      // click 이벤트로 받은 선택된 pipelineSelected 값을 기존 데이터 pipelineList 에서 필터링 시켜야한다.
-      // this.pipelineSelected = this.pipelineSelected.filter((item)=>item === pipelineKey);
-      this.pipelineList = this.pipelineList.filter((item)=>item === pipelineKey);
+      // pipelineList 배열에서 pipelineKey와 일치하는 항목만 남긴다.
+      this.pipelineList = this.pipelineList.filter((item) => item === pipelineKey);
       console.log("pipelineList : " + this.pipelineList);
-      console.log( "pipelineSelected : " + this.pipelineSelected) // 여기에는 선택된 값들의 키가 들어온다. 키는 이제 필요없다.
     },
 
-    // 이 부분 수정 : 실시간 -> filter
-    // 기존 데이터를 filter 기능으로 변경
     // 필터는 모두 한번에 구현해서 watch 에 넣기
     async filterTable() {
+
+      // 파이프라인 필터
       this.tableListFilter = []; // 필터된  데이터 초기화
-      // `pipelineSelected` 값을 사용하여 테이블 데이터 파이프라인 필터링
-      let filteredTableList = this.tableList; // 원본 새로 콜 안하기위해
+      let filteredTableList = this.tableList; // 원본을 그대로 유지하기 위해 tableList 를 참조해서 filteredTableList 를 만들어 사용한다
       // filtered pipelineKey
-      filteredTableList = filteredTableList.filter((item)=>this.pipelineSelected.includes(item.pipelinekey) ) // pipelineSelected 와 있는값 비교 includes
+      // 원본데이터와 선택된 pipelineSelected 를 includes 메서드를 사용하여 값을 대조해서 table 리스트를 filter
+      filteredTableList = filteredTableList.filter((item) => this.pipelineSelected.includes(item.pipelinekey))
+      // 그리고 filter 된 data 를 table 에 출력
 
-      // filtered moduleType if moduleFilter === "" 기존 값 그대로 대입하고 아니면 이전에 했던 filter
-      if (this.moduleFilter === ""){
+      // 모듈 필터
+      // module 선택값이 "" 비어있으면 table 전체를 그대로 출력하고
+      if (this.moduleFilter === "") {
         this.tableListFilter = filteredTableList;
-        console.log("filteredTableList : " + filteredTableList)
-        console.log("this.tableListFilter : " + this.tableListFilter)
-      }else {
-        this.tableListFilter = filteredTableList.filter((item=>item.moduleType === this.moduleFilter))
+      } else {
+        // 아니면 module 에 선택된 값과 매칭되는 것을 출력해라
+        this.tableListFilter = filteredTableList.filter((item => item.moduleType === this.moduleFilter))
         console.log(this.tableListFilter);
       }
-
-
     }
   },
 
-  // watch 에 넣어서 변경사항을 감시하고 자동 업데이트 시키도록 해야한다.
-
   watch: {
     pipelineSelected: {
       handler() {
@@ -117,9 +108,11 @@ export default {
 
 <template>
   <h1>Summery</h1>
-<!--파이프라인 선택-->
+  <!--파이프라인 선택-->
   <fieldset>
     <legend>파이프라인</legend>
+<!--    <input checked type="checkbox" id="pipelineAll" />-->
+<!--    <label for="pipelineAll">All</label>-->
     <div v-for="pipeline in pipelineFilter" :key="pipeline.key">
       <input type="checkbox" :id="pipeline.name" v-on:click="setPipelineSelected(pipeline.key)" :value="pipeline.key"/>
       <label :for="pipeline.name">{{ pipeline.name }}</label>
@@ -127,7 +120,7 @@ export default {
   </fieldset>
   <p>Selected pipeline names: {{ pipelineSelected }}</p>
 
-<!--모듈 필터-->
+  <!--모듈 필터-->
   <div class="moduleFilter">
     <label for="moduleFilter">모듈</label>
     <select id="moduleFilter" v-model="moduleFilter">
@@ -138,7 +131,7 @@ export default {
 
     {{ moduleFilter }}
   </div>
-<!--테이블 출력-->
+  <!--테이블 출력-->
   <table class="table">
     <thead class="thead">
     <tr>
-- 
GitLab