fix : refactoring code, disunite API service and async function add. TODO watch Token statue because async state not recommend.

src/vite-frontend/src/api/index.ts

@@ -0,0 +1,45 @@
+import axios, {AxiosResponse} from "axios";
+import { useStore } from "vuex";
+
+//TODO
+//임시방편 watch로 바라보는게 더 좋다고함. watch로 감시하자. Token
+const getToken = () => {
+    let test = useStore().getters.getToken;
+    console.log(test)
+    return test;
+}
+
+const axiosService = axios.create({
+    baseURL: import.meta.env.VITE_BASE_URL,
+})
+
+const signUp = async (user: object): Promise<AxiosResponse> => {
+    return axiosService.post('/api/users',{user});
+}
+
+const signIn = async (user: object): Promise<AxiosResponse> => {
+    return axiosService.post('/api/users/login',{user})
+}
+
+const getCurrentUser = async (): Promise<AxiosResponse> => {
+    let currentToken = localStorage.getItem("token");
+    return axiosService.get('/api/user', {
+        headers: {
+            Authorization: "TOKEN " + currentToken
+        }
+    })
+}
+
+const updateUser = async (user: object): Promise<AxiosResponse> => {
+    let currentToken = localStorage.getItem("token");
+    console.log(user);
+    console.log(currentToken);
+    return axiosService.put('/api/user', {user}, {
+        headers: {
+            Authorization: "TOKEN " + currentToken,
+            "Content-Type": `application/json`,
+        }
+    })
+}
+
+export { signUp, signIn, getCurrentUser, updateUser }

src/vite-frontend/src/store/index.ts

@@ -1,4 +1,3 @@
-import axios from "axios";
 import { createStore } from 'vuex';
 
 export default createStore({
@@ -12,7 +11,13 @@ export default createStore({
         },
         setToken(state, token){
             state.token = token;
-        },
+        }
+    },
+    getters: {
+        getToken(state){
+            console.log(state.token);
+            return state.token;
+        }
     },
     actions: {
         LOGIN({commit}, user){
@@ -22,11 +27,11 @@ export default createStore({
                 localStorage.setItem("token", user.token);
             },
         LOGOUT({commit}){
-            commit("setUsername","");
+                commit("setUsername","");
-            commit("setToken","");
+                commit("setToken","");
-            localStorage.removeItem("username");
+                localStorage.removeItem("username");
-            localStorage.removeItem("token");
+                localStorage.removeItem("token");
-            },
+                },
         },
     }
 )

src/vite-frontend/src/views/TheArticleDetail.vue

@@ -225,6 +225,7 @@ export default defineComponent({
           }
         }).then(response => {
           comment.body="";
+          getCommentList.comment.push(response.data.comment);
         })
     }
 
@@ -233,13 +234,12 @@ export default defineComponent({
       axios.get(url + "/api/articles/" + props.slug,)
           .then(response => {
         articleDetail.article = response.data.article;
+        console.log(articleDetail.article);
       })
 
       axios.get(url + "/api/articles/" + props.slug + "/comments")
           .then(response => {
             getCommentList.comment = response.data.comments;
-            console.log(getCommentList.comment);
-            console.log(response);
           })
     })
 

src/vite-frontend/src/views/TheLogin.vue

@@ -21,7 +21,7 @@
             <fieldset class="form-group">
               <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
             </fieldset>
-            <button @click = "signin" class="btn btn-lg btn-primary pull-xs-right">
+            <button @click = "Login" class="btn btn-lg btn-primary pull-xs-right">
               Sign in
             </button>
           </form>
@@ -33,8 +33,8 @@
 </template>
 
 <script lang="ts">
-import {reactive, ref} from "vue";
+import { reactive, ref } from "vue";
-import axios from "axios";
+import { signIn } from "@/api";
 import router from "@/router";
 import { useStore } from "vuex";
 
@@ -51,25 +51,21 @@ export default {
 
     let loginValidation = ref(false);
 
-    const signin = () => {
+    const Login = async () => {
-      const url = import.meta.env.VITE_BASE_URL;
+      try{
-      axios.post(url+'/api/users/login',{
+        const { data } = await signIn(user);
-        user
+        store.dispatch("LOGIN",data.user);
-      })
+        router.push({name:"Home"});
-          .then(response => {
+      }catch(error: any){
-            store.dispatch("LOGIN",response.data.user);
+        const code = error.response.data.errors.code;
-            router.push({name:"Home"});
+        if(code == "EMAIL_NULL_OR_INVALID"){
-          })
+          loginValidation.value = true;
-          .catch(error =>{
+        }else if(code == "PASSWORD_WRONG"){
-            const code = error.response.data.errors.code;
+          loginValidation.value = true;
-            if(code == "EMAIL_NULL_OR_INVALID"){
+        }
-              loginValidation.value = true;
+      };
-            }else if(code == "PASSWORD_WORNG"){
-              loginValidation.value = true;
-            }
-          })
     }
-    return {user, loginValidation, signin};
+    return {user, loginValidation, Login};
   }
 
 

src/vite-frontend/src/views/TheRegister.vue

@@ -16,8 +16,6 @@
           <ul class="error-messages" v-if="usernameDuplicate">
             <li align="left">username has already been taken</li>
           </ul>
-
-
           <form>
             <fieldset class="form-group">
               <input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username">
@@ -28,7 +26,7 @@
             <fieldset class="form-group">
               <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
             </fieldset>
-            <button @click = "signup"  class="btn btn-lg btn-primary pull-xs-right">
+            <button @click = "register"  class="btn btn-lg btn-primary pull-xs-right">
               Sign up
             </button>
           </form>
@@ -41,9 +39,9 @@
 
 <script lang="ts">
 
-import axios from "axios";
+import { signUp } from "@/api";
 import router from "@/router";
-import {reactive, ref} from "vue";
+import { reactive, ref } from "vue";
 import { useStore } from "vuex";
 
 export default {
@@ -73,28 +71,24 @@ export default {
       emailDuplicate.value = false;
     };
 
-    const signup = () => {
+    const register = async () => {
-      const url = import.meta.env.VITE_BASE_URL;
+      try{
-      axios.post(url+'/api/users',{
+        const { data } = await signUp(user);
-        user
+        store.dispatch("LOGIN",data.user);
-      })
+        router.push({name:"Home"});
-          .then(response => {
+      }catch(error: any){
-            store.dispatch("LOGIN",response.data.user);
+        const code = error.response.data.errors.code;
-            router.push({name:"Home"});
+        if(code == "DUPLICATE_EMAIL_USERNAME"){
-          })
+          showEmailUsernameError();
-          .catch(error =>{
+        }else if(code == "DUPLICATE_EMAIL"){
-            const code = error.response.data.errors.code;
+          showEmailError();
-            if(code == "DUPLICATE_EMAIL_USERNAME"){
+        }else if(code == "DUPLICATE_USERNAME"){
-              showEmailUsernameError();
+          showUsernameError();
-            }else if(code == "DUPLICATE_EMAIL"){
+        }
-              showEmailError();
+      }
-            }else if(code == "DUPLICATE_USERNAME"){
-              showUsernameError();
-            }
-          })
     }
 
-    return { user, emailDuplicate, usernameDuplicate,  signup, showEmailUsernameError,showEmailError, showUsernameError }
+    return { user, emailDuplicate, usernameDuplicate,  register, showEmailUsernameError,showEmailError, showUsernameError }
   },
 
 }

src/vite-frontend/src/views/TheSetting.vue

@@ -25,7 +25,7 @@
               <fieldset class="form-group">
                 <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="password">
               </fieldset>
-              <button @click = "updateUser" class="btn btn-lg btn-primary pull-xs-right">
+              <button @click="setUser" class="btn btn-lg btn-primary pull-xs-right">
                 Update Settings
               </button>
             </fieldset>
@@ -42,16 +42,15 @@
 </template>
 
 <script lang="ts">
-import axios from "axios";
+import { getCurrentUser, updateUser } from "@/api";
-import router from "@/router";
 import { useStore } from "vuex";
+import router from "@/router";
 import { onMounted, reactive } from "vue";
 
 export default {
   name: "TheSetting",
   setup() {
     const url = import.meta.env.VITE_BASE_URL;
-    const token = localStorage.getItem("token");
     const user = reactive({
       bio: "",
       email: "",
@@ -69,23 +68,21 @@ export default {
       user.image = getuser.image
     }
 
-    const updateUser = () => {
+    const setUser = async ()  => {
-      axios.put(url+'/api/user',{user},{
+      try{
-        headers:{
+        console.log(await updateUser(user));
-          Authorization : "TOKEN " + token,
+        /*
-          "Content-Type": `application/json`,
+        const { data } = await updateUser(user);
-        }})
+        store.dispatch("LOGIN", data.user);
-          .then(response => {
+        router.push({
-            store.dispatch("LOGIN",response.data.user);
+          name: 'Profile',
-            router.push({
+          params: {username: data.user.username}
-              name: 'Profile',
+        })*/
-              params: {username: response.data.user.username}})
+      }catch(error:any){
-
+        // Todo Error처리
-          })
+        const code = error.response.data.errors.code;
-          .catch(error =>{
+        console.log(code);
-            const code = error.response.data.errors.code;
+      }
-            //TODO 예외처리
-          })
     }
 
     const logout = () =>{
@@ -95,22 +92,18 @@ export default {
     }
 
 
-    onMounted(() => {
+    onMounted(async () => {
-      axios.get(url+'/api/user',{
+      try {
-        headers:{
+        const { data } = await getCurrentUser();
-          Authorization : "TOKEN " + token
+        store.dispatch("LOGIN", data.user)
-        }
+        getUser(data.user);
-      })
+      } catch (error: any) {
-          .then(response => {
+        //TODO error처리
-            store.dispatch("LOGIN",response.data.user)
+        console.log(error);
-            getUser(response.data.user);
+      }
-          })
-          .catch(error =>{
-            const code = error.response.data.errors.code;
-            //TODO 예외처리
-          })
     })
-    return {user, password, url, token, getUser, updateUser, logout};
+
+    return {user, password, url, getUser, setUser, logout};
   }
 }
 </script>

src/vite-frontend/vite.config.ts

@@ -16,14 +16,6 @@ export default defineConfig({
   server: {
     https: true,
     port: 4000,
-    proxy:{
-      '/': {
-        target : "http://3.35.44.58:8080",
-        rewrite: (path) => path.replace(/^\//,''),
-        changeOrigin: true,
-        secure: false
-      }
-    }
   },
 
   plugins: [vue(),basicSsl()]