이것저것

src/front/src/api/articleApi.js

@@ -3,25 +3,37 @@ import axios from 'axios';
 export default {
     getArticles({page = 0, size = 10, q = ''}, authorization) {
 
-        return axios({
+        const request = axios({
             url: '/api/articles',
-            headers: {
-                'Authorization': authorization
-            },
             params: {
                 page,
                 size,
                 q
             }
         });
+
+        if (authorization) {
+            request.headers = {
+                'Authorization': authorization
+            };
+        }
+
+        return request;
     },
     getArticle({articleId}, authorization) {
-        return axios({
+        const request = axios({
             url: '/api/articles/' + articleId,
-            headers: {
+
+        });
+
+        if (authorization) {
+            request.headeres = {
                 'Authorization': authorization
             }
-        });
+        }
+
+        return request;
+
     },
     postArticle({title = '', content = ''}, authorization) {
 

src/front/src/pages/articles/Detail.vue

@@ -36,9 +36,6 @@
             };
         },
         async beforeCreate() {
-            authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
-                this
-            );
             articleService.getArticle = articleService.getArticle.bind(this);
             articleService.removeArticle = articleService.removeArticle.bind(this);
         },

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

@@ -9,17 +9,20 @@
 
         <br/>
 
-        <div>
-            <router-link to="/articles/write">글쓰기</router-link>
-        </div>
+        <div v-if="user">
+            <div>
+                <router-link to="/articles/write">글쓰기</router-link>
+            </div>
 
-        <div>
-            <button type="button" @click="logout">로그아웃</button>
-        </div>
+            <div>
+                <button type="button" @click="logout">로그아웃</button>
+            </div>
 
-        <div>
-            <router-link to="/me">My</router-link>
+            <div>
+                <router-link to="/me">My</router-link>
+            </div>
         </div>
+        
     </div>
 </template>
 
@@ -32,18 +35,27 @@
         data() {
             return {
                 articles: [],
-                pending: true
+                pending: true,
+                user: null
             };
         },
         async beforeCreate() {
             articleService.getArticles = articleService.getArticles.bind(this);
             authService.logout = authService.logout.bind(this);
-            authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
-                this
-            );
+            authService.session = authService.session.bind(this);
+            // authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
+            //     this
+            // );
         },
         async created() {
-            await authService.banishIfUserUnAuthenticated();
+            try {
+                const { data } = await authService.session();
+                this.user = data;
+            } catch (err) {
+                console.log(err);
+            }
+
+            // await authService.banishIfUserUnAuthenticated();
             this.articles = await articleService.getArticles({});
             this.pending = false;
         },

src/front/src/pages/articles/Write.vue

@@ -41,9 +41,10 @@
             );
         },
         async created() {
+            await authService.banishIfUserUnAuthenticated();
+
             const id = this.$route.query.id;
             if (id) {
-                await authService.banishIfUserUnAuthenticated();
                 const {title, content, user} = await articleService.getArticle(id);
                 await articleService.doseSessionHasPermission(user);
 

src/front/src/services/articleService.js

@@ -5,10 +5,13 @@ import authApi from "../api/authApi";
 export default {
     async getArticles({page = 0, size = 10}) {
         try {
+            const accessToken = this.$cookie.get('accessToken');
+            const authorization = accessToken ? commonUtil.getAuthenticationHeaderBearer(accessToken) : '';
+
             const result = await articleApi.getArticles({
                 page,
                 size
-            }, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+            }, authorization);
             return result.data;
         } catch (err) {
             alert('문제가 발생하였습니다.');
@@ -20,9 +23,9 @@ export default {
             const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
             const result = await articleApi.getArticle({articleId}, authorization);
             return result.data;
-        } catch (e) {
+        } catch (err) {
             alert('문제가 발생하였습니다.');
-            console.log(e);
+            console.log(err);
         }
     },
     async removeArticle(articleId) {
@@ -54,23 +57,16 @@ export default {
         }
     },
     async doseSessionHasPermission(user) {
-        let session = null;
-
         try {
             const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
-            session = result.data;
-        } catch (err) {
-            alert('문제가 발생하였습니다.');
-            return;
-        }
-
-        try {
-            if (user.id !== session.id) {
-                throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
+            const session = result.data;
+            if (session.id !== user.id) {
+                alert("현재 사용자가 해당 게시글에 권한이 없습니다.");
+                await this.$router.replace("/articles/" + this.$route.query.id);
             }
         } catch (err) {
-            alert(err.message);
-            await this.$router.replace("/articles/" + this.$route.query.id);
+            alert('문제가 발생하였습니다.');
+            console.log(err);
         }
     }
 }

src/front/src/services/authService.js

@@ -26,6 +26,10 @@ export default {
             }
         }
     },
+    session() {
+        return authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
+
+    },
     async logout() {
         try {
             this.$cookie.set('accessToken', null, 0);

src/main/java/com/example/vue/config/SecurityConfiguration.java

@@ -33,7 +33,7 @@ public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
             .antMatchers("/auth/login").permitAll()
             .antMatchers("/auth/register").permitAll()
             .antMatchers("/users").authenticated()
-            .antMatchers("/articles").authenticated()
+            .antMatchers("/articles").permitAll()
             .antMatchers("/me").authenticated()
             .and()
             .formLogin().disable()

src/main/java/com/example/vue/domain/article/Article.java

@@ -63,6 +63,10 @@ public class Article {
     }
 
     public boolean compareUser(User user) {
+        if (user == null) {
+            return false;
+        }
+
         return compareUser(user.getId());
     }