From f8bd78a31e570437b6209006cea4385a64a70c64 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: Wed, 5 Feb 2020 10:45:38 +0900 Subject: [PATCH] =?UTF-8?q?bind=20logic=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/front/src/api/articleApi.js | 7 +++++++ src/front/src/api/authApi.js | 13 ++++++++++--- src/front/src/middlewares/authentication.js | 21 +++++++++++++-------- src/front/src/pages/Welcome.vue | 5 +++-- src/front/src/pages/articles/Detail.vue | 6 ++++-- src/front/src/pages/articles/List.vue | 10 +++++++--- src/front/src/pages/articles/Write.vue | 13 ++++++++----- src/front/src/pages/auth/Login.vue | 10 ++++++---- src/front/src/pages/auth/Register.vue | 2 +- 9 files changed, 59 insertions(+), 28 deletions(-) diff --git a/src/front/src/api/articleApi.js b/src/front/src/api/articleApi.js index be0031f..5b239ff 100644 --- a/src/front/src/api/articleApi.js +++ b/src/front/src/api/articleApi.js @@ -2,6 +2,13 @@ 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 b8215da..7ba5886 100644 --- a/src/front/src/api/authApi.js +++ b/src/front/src/api/authApi.js @@ -2,6 +2,12 @@ import axios from "axios"; 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({ @@ -13,12 +19,12 @@ export default { } }); }, - session(token) { + session() { return axios({ method: 'get', url: '/api/users', headers: { - 'Authorization': 'Bearer ' + token + 'Authorization': 'Bearer ' + this.$cookie.get('accessToken') } }); }, @@ -37,4 +43,5 @@ export default { logout() { this.$cookie.set('accessToken', null, 0); } -} \ No newline at end of file +} + diff --git a/src/front/src/middlewares/authentication.js b/src/front/src/middlewares/authentication.js index f478283..9e59545 100644 --- a/src/front/src/middlewares/authentication.js +++ b/src/front/src/middlewares/authentication.js @@ -1,11 +1,16 @@ import axios from "axios"; -export default async function () { - await axios({ - method: 'get', - url: '/api/users', - headers: { - 'Authorization': 'Bearer ' + this.$cookie.get('accessToken') - } - }); +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') + } + }); + } } \ No newline at end of file diff --git a/src/front/src/pages/Welcome.vue b/src/front/src/pages/Welcome.vue index 5059387..ec80116 100644 --- a/src/front/src/pages/Welcome.vue +++ b/src/front/src/pages/Welcome.vue @@ -11,9 +11,10 @@ export default { name: "Welcome", async beforeCreate() { - const accessToken = this.$cookie.get('accessToken'); + authApi.bind(this); + try { - await authApi.session.bind(this)(accessToken); + await authApi.session(); await this.$router.replace('/articles'); } catch (e) { console.log(e); diff --git a/src/front/src/pages/articles/Detail.vue b/src/front/src/pages/articles/Detail.vue index 8854927..fd5b50c 100644 --- a/src/front/src/pages/articles/Detail.vue +++ b/src/front/src/pages/articles/Detail.vue @@ -30,9 +30,11 @@ } }, async beforeCreate() { + articleApi.bind(this); + try { const articleId = this.$route.params.id; - const result = await articleApi.getArticle.bind(this)(articleId); + const result = await articleApi.getArticle(articleId); this.article = result.data; this.init = true; @@ -46,7 +48,7 @@ if(!confirm('정말 삭제하시겠습니까?')) return; try { - await articleApi.removeArticle.bind(this)(articleId); + await articleApi.removeArticle(articleId); await this.$router.push('/articles'); } catch (e) { alert('문제가 발생하였습니다.'); diff --git a/src/front/src/pages/articles/List.vue b/src/front/src/pages/articles/List.vue index 861f980..a669cf2 100644 --- a/src/front/src/pages/articles/List.vue +++ b/src/front/src/pages/articles/List.vue @@ -30,8 +30,12 @@ } }, async beforeCreate() { + authentication.bind(this); + articleApi.bind(this); + authApi.bind(this); + try { - await authentication.bind(this)(); + await authentication.session(); } catch (e) { alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); await this.$router.replace('/'); @@ -39,7 +43,7 @@ } try { - const result = await articleApi.getArticles.bind(this)({}); + const result = await articleApi.getArticles({}); this.articles = result.data; this.pending = false; } catch (err) { @@ -52,7 +56,7 @@ if (!confirm('정말 로그아웃 하시겠습니까?')) return; try { - await authApi.logout.bind(this)(); + await authApi.logout(); await this.$router.push('/'); } catch (e) { console.log(e); diff --git a/src/front/src/pages/articles/Write.vue b/src/front/src/pages/articles/Write.vue index 922e8dc..944d847 100644 --- a/src/front/src/pages/articles/Write.vue +++ b/src/front/src/pages/articles/Write.vue @@ -30,8 +30,11 @@ } }, async beforeCreate() { + authentication.bind(this); + articleApi.bind(this); + try { - authentication.bind(this)(); + await authentication.session(); } catch (err) { alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.'); await this.$router.replace('/'); @@ -42,7 +45,7 @@ if (id) { try { - const result = await articleApi.getArticle.bind(this)(id); + const result = await articleApi.getArticle(id); const {title, content} = result.data; this.title = title; this.content = content; @@ -53,7 +56,7 @@ } }, methods: { - create: async function(evt) { + async create(evt) { evt.preventDefault(); const {title, content} = this; @@ -64,7 +67,7 @@ }; try { - await articleApi.postArticle.bind(this)(data); + await articleApi.postArticle(data); await this.$router.push('/articles'); } catch (err) { alert('문제가 발생하였습니다.'); @@ -84,7 +87,7 @@ }; try { - await articleApi.updateArticle.bind(this)(id, data); + await articleApi.updateArticle(id, data); await this.$router.push('/articles'); } catch (err) { alert('문제가 발생하였습니다.'); diff --git a/src/front/src/pages/auth/Login.vue b/src/front/src/pages/auth/Login.vue index 3064c92..2d14eb6 100644 --- a/src/front/src/pages/auth/Login.vue +++ b/src/front/src/pages/auth/Login.vue @@ -24,9 +24,12 @@ } }, async beforeCreate() { - const accessToken = this.$cookie.get('accessToken'); + authApi.bind(this); + + + try { - await authApi.session.bind(this)(accessToken); + await authApi.session(); await this.$router.replace('/articles'); } catch (e) { console.log(e); @@ -48,9 +51,8 @@ }, session: async function(evt) { - const accessToken = this.$cookie.get('accessToken'); try { - const result = await authApi.session(accessToken); + 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 796e7c0..f6aa581 100644 --- a/src/front/src/pages/auth/Register.vue +++ b/src/front/src/pages/auth/Register.vue @@ -25,7 +25,7 @@ evt.preventDefault(); const { email, name, password } = this; try { - const result = await authApi.register({email, name, password}); + await authApi.register({email, name, password}); } catch (err) { if (err.response.status === 409) { alert('이미 존재하는 이메일입니다.');