11.18save TODO reload Header Login status

src/vite-frontend/src/components/TheHeader.vue

@@ -19,16 +19,16 @@
           <!-- Add "active" class when you're on that page" -->
           <router-link to="/" class="nav-link active" active-class="active">Home</router-link>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" v-if="isLogin">
           <router-link to="/article" class="nav-link" active-class="active">New Article</router-link>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" v-if="isLogin">
             <router-link to="/settings" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" v-if="!isLogin">
           <router-link to="/login" class="nav-link" active-class="active">Sign in</router-link>
         </li>
-        <li class="nav-item">
+        <li class="nav-item" v-if="!isLogin">
           <router-link to="/register" class="nav-link" active-class="active">Sign up</router-link>
         </li>
       </ul>
@@ -39,8 +39,31 @@
 </template>
 
 <script lang="ts">
+import { onMounted, ref } from "vue";
+import { useStore } from "vuex";
+
 export default {
-  name: "TheHeader"
+  name: "TheHeader",
+  setup(){
+    const store = useStore();
+
+    const token = ref("");
+    const username = ref("");
+
+    const isLogin = ref(false);
+
+    onMounted(()=> {
+      console.log("mounted!", isLogin.value);
+        if(store.state.token == ""){
+          isLogin.value = false;
+        }else{
+          isLogin.value = true;
+        }
+    })
+
+    return { isLogin}
+  }
+
 }
 </script>
 

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

@@ -12,9 +12,6 @@ export default createStore({
         },
         setToken(state, token){
             state.token = token;
-        },
-        getToken(state){
-            return state.token
         }
     },
     actions: {
@@ -24,6 +21,12 @@ export default createStore({
                 localStorage.setItem("username", user.username);
                 localStorage.setItem("token", user.token);
             },
+        LOGOUT({commit}){
+            commit("setUsername","");
+            commit("setToken","");
+            localStorage.removeItem("username");
+            localStorage.removeItem("token");
+            },
         },
     }
 )

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

@@ -58,7 +58,7 @@ export default {
       })
           .then(response => {
             store.dispatch("LOGIN",response.data.user);
-            router.push("/");
+            router.push({name:"Home"});
           })
           .catch(error =>{
             const code = error.response.data.errors.code;

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

@@ -84,9 +84,11 @@ export default {
         user
       })
           .then(response => {
-            store.dispatch("LOGIN",response.data.user);
-            allHideError();
-            router.push("/");
+            store.dispatch("LOGIN",response.data.user)
+                .then(()=>{
+                  allHideError();
+                  router.push({name: "Home"});
+                });
           })
           .catch(error =>{
             const code = error.response.data.errors.code;

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

@@ -30,6 +30,10 @@
               </button>
             </fieldset>
           </form>
+          <hr>
+          <button class="btn btn-outline-danger" @click="logout">
+            Or click here to logout.
+          </button>
         </div>
 
       </div>
@@ -84,6 +88,12 @@ export default {
           })
     }
 
+    const logout = () =>{
+      store.dispatch("LOGOUT").then(()=>{
+        router.push({name: "Home"});
+      })
+    }
+
 
     onMounted(() => {
       axios.get(url+'/api/user',{
@@ -100,7 +110,7 @@ export default {
             //TODO 예외처리
           })
     })
-    return {user, password, url, token, getUser, updateUser};
+    return {user, password, url, token, getUser, updateUser, logout};
   }
 }
 </script>