Login with session

backend/routes/login.js

@@ -43,11 +43,12 @@ router.get("/logout", function(req, res) {
       if (err) {
         console.log(err);
       } else {
-        res.redirect("/"); // 수정해야 할 듯
+        console.log("Hello");
+        res.redirect("http://localhost:8081/"); // 수정해야 할 듯
       }
     });
   } else {
-    res.redirect("/");
+    res.redirect("http://localhost:8081/");
   }
 });
 

frontend/src/App.vue

@@ -6,27 +6,21 @@
           <span class="md-title">MajorBook</span>
         </div>
 
-        <div style="flex:1">
-          <div align="right">
-            <div v-if="!checkLoggedIn">
+        <div style="flex:1; height:20px" align="right">
+          <div v-if="isLoggedIn === false">
             <Login />
             <SignUp />
           </div>
-            <div v-if="checkLoggedIn">
+          <div v-else>
             <Logout />
           </div>
         </div>
-        </div>
 
         <div class="md-toolbar-row">
           <md-tabs class="md-primary" style="margin: auto; height: 30px">
             <md-tab id="tab-home" md-label="Home" to="/home"></md-tab>
             <md-tab id="tab-profile" md-label="Profile" to="/profile"></md-tab>
-            <md-tab
-              id="tab-list"
-              md-label="전공서적보기"
-              to="/BookSearchPage"
-            ></md-tab>
+            <md-tab id="tab-list" md-label="전공서적보기" to="/BookSearchPage"></md-tab>
           </md-tabs>
         </div>
       </md-app-toolbar>
@@ -63,25 +57,26 @@ export default {
   },
   methods: {
     checkSession() {
-      this.$http.get("/api/login/checkSession").then(function(response) {
-        //console.log(response.data);
+      this.$http.get("/api/login/checkSession").then(response => {
+        console.log(response.data);
         if (response.data === true) {
-          return true;
+          return (this.isLoggedIn = true);
+          //this.$router.push("home");
         } else {
-          return false;
+          return (this.isLoggedIn = false);
         }
       });
     }
-  },
-  computed: {
-    checkLoggedIn() {
-      console.log(this.checkSession());
-      if (this.checkSession() === true) {
-        return true;
-      }
-      return false;
-    }
   }
+  // computed: {
+  //   checkLoggedIn() {
+  //     console.log(this.checkSession());
+  //     if (this.checkSession() === true) {
+  //       return (this.isLoggedIn = true);
+  //     }
+  //     return (this.isLoggedIn = false);
+  //   }
+  // }
 };
 </script>
 

frontend/src/components/BookSearchPage.vue

@@ -96,61 +96,51 @@
   </div>
 </template>
 
-
-
 <script>
-import Vue from 'vue'
-import VueMaterial from 'vue-material'
-import Multiselect from 'vue-multiselect'
-import 'vue-material/dist/vue-material.min.css'
-import 'vue-material/dist/theme/default.css'
-Vue.use(VueMaterial)
+import Vue from "vue";
+import VueMaterial from "vue-material";
+import Multiselect from "vue-multiselect";
+import "vue-material/dist/vue-material.min.css";
+import "vue-material/dist/theme/default.css";
+Vue.use(VueMaterial);
 export default {
   components: { Multiselect },
-    name: 'MaterialIcons',
+  name: "MaterialIcons",
   data() {
     return {
-          bottomPosition: 'md-bottom-right',
+      bottomPosition: "md-bottom-right",
       active: false,
       SearchResult: false,
       grade: null,
       major: null,
       type: null,
-            option1: ['1학년','2학년','3학년','4학년'],
-            option2: ['소프트웨어학과','미디어학과','경제학과'],
-            option3: ['전공 필수', '전공 선택', '교양선택','기초과목'],
-            Books : [
-            ],
+      option1: ["1학년", "2학년", "3학년", "4학년"],
+      option2: ["소프트웨어학과", "미디어학과", "경제학과"],
+      option3: ["전공 필수", "전공 선택", "교양선택", "기초과목"],
+      Books: [],
       submit: {
         title: "",
         grade: "",
         major: "",
-            src : "",
+        src: ""
       }
     };
   },
   created() {
-          this
-            .$http
-            .get('/api/books')
-            .then(response => {
+    this.$http.get("/api/books").then(response => {
       this.Books = response.data;
-              console.log("Success")
-              console.log(this.Books)
-            })
+      console.log("Success");
+      console.log(this.Books);
+    });
   },
   methods: {
     Search: function() {
-            if(this.grade !== null && this.major !== null && this.type !== null)
-            {   
+      if (this.grade !== null && this.major !== null && this.type !== null) {
         this.SearchResult = true;
         console.log(this.SearchResult);
+      } else {
+        alert("검색할 카테고리를 전부 입력해주세요");
       }
-            else
-            {
-                alert("검색할 카테고리를 전부 입력해주세요")
-            }
-
     },
     Register() {
       this.$http
@@ -167,27 +157,24 @@ export default {
 };
 </script>
 
-
-<style lang='css'>
-html,body {
+<style lang="css">
+html,
+body {
   text-align: center;
   margin: 0;
   width: 100%;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
   justify-content: center;
-    
 }
 .search {
-    margin-Bottom: 0.5%;
+  margin-bottom: 0.5%;
 }
 .select {
-
   text-align: center;
-    margin-Top: 2%;
+  margin-top: 2%;
 }
 .button {
   margin-top: 70px;
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.min.css">
-</style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file

frontend/src/components/login/Login.vue

@@ -13,10 +13,8 @@
         <md-input v-model="user.password" type="password" />
       </md-field>
 
-      <md-button class="md-primary" v-on:click="login">Login</md-button>
-      <md-button class="md-primary" v-on:click="active = false"
-        >Close</md-button
-      >
+      <md-button class="md-raised md-primary" v-on:click="login">Login</md-button>
+      <md-button class="md-primary" v-on:click="active = false">Close</md-button>
     </md-dialog>
   </div>
 </template>
@@ -27,6 +25,7 @@ import VueMaterial from "vue-material";
 import "vue-material/dist/vue-material.min.css";
 import "vue-material/dist/theme/default.css";
 Vue.use(VueMaterial);
+
 export default {
   data: function() {
     return {
@@ -50,6 +49,7 @@ export default {
             alert("success login");
             //this.$router.push("Logout");
             this.active = false;
+            location.reload();
           },
           error => {
             // error 를 보여줌

frontend/src/components/login/Logout.vue

@@ -20,7 +20,9 @@ export default {
       console.log("Logout start");
       this.$http.get("/api/login/logout").then(response => {
         if (response) {
+          alert("success logout");
           //this.$router.push("home");
+          location.reload();
         }
       });
     }

frontend/src/components/login/SignUp.vue

 <template>
-  <div id="logout">
+  <div id="signup">
     <md-button class="md-primary" v-on:click="active = true">Sign Up</md-button>
     <md-dialog :md-active.sync="active" style="width:500px; height: 1000px">
       <md-dialog-title>Sign Up</md-dialog-title>
@@ -23,17 +23,13 @@
         <md-input name="email" v-model="user.email" />
       </md-field>
 
-      <md-button class="md-raised md-primary" v-on:click="signUp"
-        >Sign Up</md-button
-      >
-      <md-button class="md-primary" v-on:click="active = false"
-        >Close</md-button
-      >
+      <md-button class="md-raised md-primary" v-on:click="signUp">Sign Up</md-button>
+      <md-button class="md-primary" v-on:click="active = false">Close</md-button>
     </md-dialog>
   </div>
 </template>
 
-<style>
+<style scoped>
 .select {
   margin: 15px;
   display: inline-flex;