게시글 디테일 수정

src/front/src/App.vue

@@ -3,6 +3,8 @@
     <router-view
       :startSpin="startSpin"
       :stopSpin="stopSpin"
+      :setSession="setSession"
+      :session="session"
     />
 
     <div id="spinner-container" v-if="spin">
@@ -25,7 +27,8 @@ export default {
   },
   data() {
     return {
-      spin: false
+      spin: false,
+      session: {}
     }
   },
   methods: {
@@ -40,6 +43,9 @@ export default {
       } else {
         this.spin = false;
       }
+    },
+    setSession(session) {
+      this.session = session;
     }
   }
 }
@@ -52,9 +58,67 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 
+/*
+=====================================
+              CSS RESET
+=====================================
+*/
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline;}
+body {line-height:1;}
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {display:block;}
+ul li{list-style:none;}
+a {margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; text-decoration: none; color: inherit; display: inline-block;}
+img {vertical-align: bottom;}
+
+/*
+=====================================
+           COMMON SYSTEM
+=====================================
+*/
+.wrapper {max-width: 1200px; margin: 0 auto;}
+.clearfix:after {content: ""; display: block; clear: both;}
+.table_cell {display: table-cell; vertical-align: middle;}
+/*
+=====================================
+            GRID SYSTEM
+=====================================
+*/
+[class*="col-"] {
+  width: 100%;
+  float: left;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.col-right{float: right;}
+.col-fit  {padding: 0;}
+
+.col-1  {width: 8.33%;}
+.col-2  {width: 16.66%;}
+.col-3  {width: 25%;}
+.col-4  {width: 33.33%;}
+.col-5  {width: 41.66%;}
+.col-6  {width: 50%;}
+.col-7  {width: 58.33%;}
+.col-8  {width: 66.66%;}
+.col-9  {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
 #spinner-container {
   display: block;
   position: fixed;
@@ -69,7 +133,7 @@ export default {
   width: 100%;
   height: 100%;
   /*background-color: #2c3e50;*/
-  /*background-color: rgba(44, 62, 80, 0.25);*/
+  background-color: rgba(44, 62, 80, 0.25);
 }
 
 .spinner-container__inner__inner {

src/front/src/api/articleApi.js

@@ -31,8 +31,6 @@ export default {
             }
         }
 
-        console.log(options);
-
         return axios(options);
     },
     postArticle({title = '', content = ''}, authorization) {

src/front/src/components/common/Header.vue

@@ -1,15 +1,45 @@
 <template>
     <header>
-        Head
+        <span>
+            게시판
+        </span>
+
+        <ul class="clearfix" v-if="!authenticated">
+            <li>
+                <router-link to="/auth/login">로그인</router-link>
+            </li>
+            <li>
+                <router-link to="/auth/register">회원가입</router-link>
+            </li>
+        </ul>
     </header>
 </template>
 
 <script>
     export default {
-        name: "Header"
+        name: "Header",
+        props: {
+            session: Object
+        },
+        computed: {
+            authenticated: function () {
+                return this.session.id;
+            }
+        }
     }
 </script>
 
 <style scoped>
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px;
+    box-sizing: border-box;
+}
 
+ul li {
+    float: left;
+    margin-left: 4px;
+}
 </style>

src/front/src/pages/articles/List.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Header />
+        <Header :session="session"/>
         <div v-if="!pending">
             <article v-for="article in articles" v-bind:key="article.id">
                 <router-link :to="{name: 'DetailArticle', params: {id: article.id}}">
@@ -40,7 +40,9 @@
         },
         props: {
             startSpin: Function,
-            stopSpin: Function
+            stopSpin: Function,
+            setSession: Function,
+            session: Object
         },
         data() {
             return {
@@ -53,9 +55,6 @@
             articleService.getArticles = articleService.getArticles.bind(this);
             authService.logout = authService.logout.bind(this);
             authService.session = authService.session.bind(this);
-            // authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
-            //     this
-            // );
         },
         async created() {
             this.startSpin();
@@ -63,6 +62,7 @@
             try {
                 const { data } = await authService.session();
                 this.user = data;
+                this.setSession(data);
             } catch (err) {
                 console.log(err);
             }

src/front/src/services/articleService.js

@@ -21,13 +21,12 @@ export default {
     async getArticle(articleId) {
         try {
             const accessToken = this.$cookie.get('accessToken');
-            const authorization = commonUtil.getAuthenticationHeaderBearer(accessToken);
+            const authorization = accessToken ? commonUtil.getAuthenticationHeaderBearer(accessToken) : null;
 
             const {data} = await articleApi.getArticle({articleId}, authorization);
             return data;
         } catch (err) {
             alert('문제가 발생하였습니다.');
-            console.log(err);
         }
     },
     async removeArticle(articleId) {

src/front/src/services/authService.js

@@ -27,8 +27,12 @@ export default {
         }
     },
     session() {
-        return authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+        const accessToken = this.$cookie.get('accessToken');
+        if (!accessToken) {
+            throw new Error("JWT not exist");
+        }
 
+        return authApi.session(commonUtil.getAuthenticationHeaderBearer(accessToken));
     },
     async logout() {
         try {