From 24fe526aaa8ef54625f8487fd24768ff767c8fdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=B5=E1=86=AB=E1=84=89?= =?UTF-8?q?=E1=85=A5=E1=86=A8?= Date: Thu, 6 Feb 2020 10:56:55 +0900 Subject: [PATCH] front update --- src/front/src/api/articleApi.js | 7 ---- src/front/src/api/authApi.js | 9 +---- src/front/src/middlewares/authentication.js | 24 +++++++----- src/front/src/pages/Welcome.vue | 5 ++- src/front/src/pages/articles/Detail.vue | 7 +++- src/front/src/pages/articles/List.vue | 43 +++++++++++---------- src/front/src/pages/articles/Write.vue | 17 ++++---- src/front/src/pages/auth/Login.vue | 32 +++++---------- src/front/src/pages/auth/Register.vue | 14 ++++++- src/front/src/utils/commonUtil.js | 9 ++--- 10 files changed, 81 insertions(+), 86 deletions(-) diff --git a/src/front/src/api/articleApi.js b/src/front/src/api/articleApi.js index 5b239ff..be0031f 100644 --- a/src/front/src/api/articleApi.js +++ b/src/front/src/api/articleApi.js @@ -2,13 +2,6 @@ import axios from 'axios'; import commonUtil from "../utils/commonUtil"; export default { - bind(context) { - this.getArticle = this.getArticle.bind(context); - this.getArticles = this.getArticles.bind(context); - this.postArticle = this.postArticle.bind(context); - this.updateArticle = this.updateArticle.bind(context); - this.removeArticle = this.removeArticle.bind(context); - }, getArticles({page = 0, size = 10, q = ''}) { return axios({ diff --git a/src/front/src/api/authApi.js b/src/front/src/api/authApi.js index 7ba5886..7143236 100644 --- a/src/front/src/api/authApi.js +++ b/src/front/src/api/authApi.js @@ -1,13 +1,8 @@ import axios from "axios"; +import commonUtil from "../utils/commonUtil"; export default { - bind(context) { - this.login = this.login.bind(context); - this.session = this.session.bind(context); - this.register = this.register.bind(context); - this.logout = this.logout.bind(context); - }, login(data) { const { email, password } = data; return axios({ @@ -24,7 +19,7 @@ export default { method: 'get', url: '/api/users', headers: { - 'Authorization': 'Bearer ' + this.$cookie.get('accessToken') + 'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)() } }); }, diff --git a/src/front/src/middlewares/authentication.js b/src/front/src/middlewares/authentication.js index 9e59545..e13d545 100644 --- a/src/front/src/middlewares/authentication.js +++ b/src/front/src/middlewares/authentication.js @@ -1,16 +1,20 @@ import axios from "axios"; +import commonUtil from "../utils/commonUtil"; export default { - bind(context) { - this.session = this.session.bind(context); - }, async session() { - await axios({ - method: 'get', - url: '/api/users', - headers: { - 'Authorization': 'Bearer ' + this.$cookie.get('accessToken') - } - }); + try { + await axios({ + method: 'get', + url: '/api/users', + headers: { + 'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)() + } + }); + } catch (e) { + alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); + await this.$router.replace('/'); + } + } } \ No newline at end of file diff --git a/src/front/src/pages/Welcome.vue b/src/front/src/pages/Welcome.vue index ec80116..fa0123a 100644 --- a/src/front/src/pages/Welcome.vue +++ b/src/front/src/pages/Welcome.vue @@ -11,8 +11,9 @@ export default { name: "Welcome", async beforeCreate() { - authApi.bind(this); - + authApi.session = authApi.session.bind(this); + }, + async created() { try { await authApi.session(); await this.$router.replace('/articles'); diff --git a/src/front/src/pages/articles/Detail.vue b/src/front/src/pages/articles/Detail.vue index fd5b50c..588d8d2 100644 --- a/src/front/src/pages/articles/Detail.vue +++ b/src/front/src/pages/articles/Detail.vue @@ -30,8 +30,10 @@ } }, async beforeCreate() { - articleApi.bind(this); - + articleApi.getArticle = articleApi.getArticle.bind(this); + articleApi.removeArticle = articleApi.removeArticle.bind(this); + }, + async created() { try { const articleId = this.$route.params.id; const result = await articleApi.getArticle(articleId); @@ -41,6 +43,7 @@ } catch (e) { console.log(e); } + }, methods: { async remove() { diff --git a/src/front/src/pages/articles/List.vue b/src/front/src/pages/articles/List.vue index eb6a10d..59fd182 100644 --- a/src/front/src/pages/articles/List.vue +++ b/src/front/src/pages/articles/List.vue @@ -27,6 +27,7 @@ import articleApi from "../../api/articleApi"; import authentication from "../../middlewares/authentication"; import authApi from "../../api/authApi"; + import commonUtil from "../../utils/commonUtil"; export default { name: "List", @@ -37,28 +38,30 @@ } }, async beforeCreate() { - authentication.bind(this); - articleApi.bind(this); - authApi.bind(this); + authentication.session = authentication.session.bind(this); + articleApi.getArticles = articleApi.getArticles.bind(this); + authApi.logout = authApi.logout.bind(this); - try { - await authentication.session(); - } catch (e) { - alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); - await this.$router.replace('/'); - return; - } - - try { - const result = await articleApi.getArticles({}); - this.articles = result.data; - this.pending = false; - } catch (err) { - alert('문제가 발생하였습니다.'); - console.log(err.response); - } }, - methods: { + async created() { + try { + await authentication.session(); + } catch (e) { + alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); + await this.$router.replace('/'); + return; + } + + try { + const result = await articleApi.getArticles({}); + this.articles = result.data; + this.pending = false; + } catch (err) { + alert('문제가 발생하였습니다.'); + console.log(err.response); + } + }, + methods: { async logout() { if (!confirm('정말 로그아웃 하시겠습니까?')) return; diff --git a/src/front/src/pages/articles/Write.vue b/src/front/src/pages/articles/Write.vue index 8d782e9..a4dfcfd 100644 --- a/src/front/src/pages/articles/Write.vue +++ b/src/front/src/pages/articles/Write.vue @@ -30,16 +30,13 @@ } }, async beforeCreate() { - authentication.bind(this); - articleApi.bind(this); - - try { - await authentication.session(); - } catch (err) { - alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); - await this.$router.replace('/'); - return; - } + authentication.session = authentication.session.bind(this); + articleApi.getArticle = articleApi.getArticle.bind(this); + articleApi.postArticle = articleApi.postArticle.bind(this); + articleApi.updateArticle = articleApi.updateArticle.bind(this); + }, + async created() { + await authentication.session(); const id = this.$route.query.id; diff --git a/src/front/src/pages/auth/Login.vue b/src/front/src/pages/auth/Login.vue index 2d14eb6..09ed635 100644 --- a/src/front/src/pages/auth/Login.vue +++ b/src/front/src/pages/auth/Login.vue @@ -1,14 +1,11 @@ @@ -23,17 +20,16 @@ password: '' } }, - async beforeCreate() { - authApi.bind(this); - - - - try { - await authApi.session(); - await this.$router.replace('/articles'); - } catch (e) { - console.log(e); - } + beforeCreate() { + authApi.session = authApi.session.bind(this); + }, + async created() { + try { + await authApi.session(); + await this.$router.replace('/articles'); + } catch (e) { + console.log(e); + } }, methods: { submit: async function(evt) { @@ -50,14 +46,6 @@ } }, - session: async function(evt) { - try { - const result = await authApi.session(); - console.log(result); - } catch (err) { - console.log(err); - } - } } } diff --git a/src/front/src/pages/auth/Register.vue b/src/front/src/pages/auth/Register.vue index f6aa581..ed8debe 100644 --- a/src/front/src/pages/auth/Register.vue +++ b/src/front/src/pages/auth/Register.vue @@ -20,7 +20,19 @@ password: '' } }, - methods: { + beforeCreate() { + authApi.register = authApi.register.bind(this); + authApi.session = authApi.session.bind(this); + }, + async created() { + try { + await authApi.session(); + await this.$router.replace("/articles"); + } catch (err) { + console.log(err); + } + }, + methods: { register: async function(evt) { evt.preventDefault(); const { email, name, password } = this; diff --git a/src/front/src/utils/commonUtil.js b/src/front/src/utils/commonUtil.js index 08fd44e..68c1ee5 100644 --- a/src/front/src/utils/commonUtil.js +++ b/src/front/src/utils/commonUtil.js @@ -1,7 +1,6 @@ -function getAuthenticationHeaderBearer() { - return 'Bearer ' + this.$cookie.get('accessToken'); -} export default { - getAuthenticationHeaderBearer -} \ No newline at end of file + getAuthenticationHeaderBearer() { + return 'Bearer ' + this.$cookie.get('accessToken'); + } +}; \ No newline at end of file