formatting
This commit is contained in:
@@ -1,64 +1,63 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import commonUtil from "../utils/commonUtil";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
getArticles({page = 0, size = 10, q = ''}, authorization) {
|
getArticles({page = 0, size = 10, q = ''}, authorization) {
|
||||||
|
|
||||||
return axios({
|
return axios({
|
||||||
url: '/api/articles',
|
url: '/api/articles',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
},
|
},
|
||||||
params: {
|
params: {
|
||||||
page,
|
page,
|
||||||
size,
|
size,
|
||||||
q
|
q
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getArticle({articleId}, authorization) {
|
getArticle({articleId}, authorization) {
|
||||||
return axios({
|
return axios({
|
||||||
url: '/api/articles/' + articleId,
|
url: '/api/articles/' + articleId,
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
postArticle({title = '', content = ''}, authorization) {
|
postArticle({title = '', content = ''}, authorization) {
|
||||||
|
|
||||||
return axios({
|
return axios({
|
||||||
url: '/api/articles',
|
url: '/api/articles',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
title,
|
title,
|
||||||
content
|
content
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
updateArticle(id, {title = '', content = ''}, authorization) {
|
updateArticle(id, {title = '', content = ''}, authorization) {
|
||||||
return axios({
|
return axios({
|
||||||
url: '/api/articles/' + id,
|
url: '/api/articles/' + id,
|
||||||
method: 'put',
|
method: 'put',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
title,
|
title,
|
||||||
content
|
content
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeArticle({articleId}, authorization) {
|
removeArticle({articleId}, authorization) {
|
||||||
|
|
||||||
return axios({
|
return axios({
|
||||||
url: '/api/articles/' + articleId,
|
url: '/api/articles/' + articleId,
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
},
|
},
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,39 +1,37 @@
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import commonUtil from "../utils/commonUtil";
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
login(data) {
|
login(data) {
|
||||||
const { email, password } = data;
|
const {email, password} = data;
|
||||||
return axios({
|
return axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
url: '/api/auth/login',
|
url: '/api/auth/login',
|
||||||
data: {
|
data: {
|
||||||
email,
|
email,
|
||||||
password
|
password
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
session(authorization) {
|
session(authorization) {
|
||||||
return axios({
|
return axios({
|
||||||
method: 'get',
|
method: 'get',
|
||||||
url: '/api/users',
|
url: '/api/users',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': authorization
|
'Authorization': authorization
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
register(data) {
|
register(data) {
|
||||||
const { email, name, password } = data;
|
const {email, name, password} = data;
|
||||||
return axios({
|
return axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
url: '/api/auth/register',
|
url: '/api/auth/register',
|
||||||
data: {
|
data: {
|
||||||
email,
|
email,
|
||||||
name,
|
name,
|
||||||
password
|
password
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -8,6 +8,6 @@ Vue.config.productionTip = false;
|
|||||||
Vue.use(VueCookie);
|
Vue.use(VueCookie);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
router
|
router
|
||||||
}).$mount('#app');
|
}).$mount('#app');
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
import axios from "axios";
|
|
||||||
import commonUtil from "../utils/commonUtil";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
async session() {
|
|
||||||
try {
|
|
||||||
await axios({
|
|
||||||
method: 'get',
|
|
||||||
url: '/api/users',
|
|
||||||
headers: {
|
|
||||||
'Authorization': commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'))
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
|
|
||||||
await this.$router.replace('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<router-link to="/auth/login">로그인</router-link> <br>
|
<router-link to="/auth/login">로그인</router-link>
|
||||||
<router-link to="/auth/register">회원가입</router-link> <br>
|
<br/>
|
||||||
</div>
|
<router-link to="/auth/register">회원가입</router-link>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -10,20 +12,19 @@
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Welcome",
|
name: "Welcome",
|
||||||
async beforeCreate() {
|
async beforeCreate() {
|
||||||
authApi.session = authApi.session.bind(this);
|
authApi.session = authApi.session.bind(this);
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
try {
|
try {
|
||||||
await authApi.session();
|
await authApi.session();
|
||||||
await this.$router.replace('/articles');
|
await this.$router.replace("/articles");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,16 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<div></div>
|
||||||
<div>
|
<div>
|
||||||
|
title :
|
||||||
|
<span>{{ article.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
title : <span>{{ article.title }}</span>
|
content:
|
||||||
</div>
|
<p>{{ article.content }}</p>
|
||||||
<div>
|
|
||||||
content: <p>{{ article.content }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="init">
|
<div v-if="init">
|
||||||
createdAt: <span>{{ article.createdAt }}</span>
|
createdAt:
|
||||||
|
<span>{{ article.createdAt }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="article.isOwn">
|
<div v-if="article.isOwn">
|
||||||
@@ -21,38 +23,39 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import authService from "../../services/authService";
|
import authService from "../../services/authService";
|
||||||
import articleService from "../../services/articleService";
|
import articleService from "../../services/articleService";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Detail",
|
name: "Detail",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
article: {},
|
article: {},
|
||||||
init: false,
|
init: false,
|
||||||
test: ''
|
test: ""
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
async beforeCreate() {
|
async beforeCreate() {
|
||||||
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
|
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
|
||||||
articleService.getArticle = articleService.getArticle.bind(this);
|
this
|
||||||
articleService.removeArticle = articleService.removeArticle.bind(this);
|
);
|
||||||
},
|
articleService.getArticle = articleService.getArticle.bind(this);
|
||||||
async created() {
|
articleService.removeArticle = articleService.removeArticle.bind(this);
|
||||||
this.article = await articleService.getArticle(this.$route.params.id);
|
},
|
||||||
this.init = true;
|
async created() {
|
||||||
},
|
this.article = await articleService.getArticle(this.$route.params.id);
|
||||||
methods: {
|
this.init = true;
|
||||||
async remove() {
|
},
|
||||||
const articleId = this.$route.params.id;
|
methods: {
|
||||||
if(!confirm('정말 삭제하시겠습니까?')) return;
|
async remove() {
|
||||||
|
const articleId = this.$route.params.id;
|
||||||
|
if (!confirm("정말 삭제하시겠습니까?")) return;
|
||||||
|
|
||||||
await articleService.removeArticle(articleId);
|
await articleService.removeArticle(articleId);
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<span @click="clickUser">{{ article.user.name }}</span>
|
<span @click="clickUser">{{ article.user.name }}</span>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<br>
|
<br/>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<router-link to="/articles/write">글쓰기</router-link>
|
<router-link to="/articles/write">글쓰기</router-link>
|
||||||
@@ -24,39 +24,40 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import authService from "../../services/authService";
|
import authService from "../../services/authService";
|
||||||
import articleService from "../../services/articleService";
|
import articleService from "../../services/articleService";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "List",
|
name: "List",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
articles: [],
|
articles: [],
|
||||||
pending: true
|
pending: true
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
async beforeCreate() {
|
async beforeCreate() {
|
||||||
articleService.getArticles = articleService.getArticles.bind(this);
|
articleService.getArticles = articleService.getArticles.bind(this);
|
||||||
authService.logout = authService.logout.bind(this);
|
authService.logout = authService.logout.bind(this);
|
||||||
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
|
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
|
||||||
|
this
|
||||||
|
);
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
await authService.banishIfUserUnAuthenticated();
|
await authService.banishIfUserUnAuthenticated();
|
||||||
this.articles = await articleService.getArticles({});
|
this.articles = await articleService.getArticles({});
|
||||||
this.pending = false;
|
this.pending = false;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async logout() {
|
async logout() {
|
||||||
if (!confirm('정말 로그아웃 하시겠습니까?')) return;
|
if (!confirm("정말 로그아웃 하시겠습니까?")) return;
|
||||||
await authService.logout();
|
await authService.logout();
|
||||||
},
|
},
|
||||||
clickUser(evt) {
|
clickUser(evt) {
|
||||||
console.log(evt.target);
|
console.log(evt.target);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<form @submit="isEdit ? update($event) : create($event)">
|
<form @submit="isEdit ? update($event) : create($event)">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label for="title">Title</label>
|
<label for="title">Title</label>
|
||||||
<input type="text" id="title" v-model="title">
|
<input type="text" id="title" v-model="title"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label for="content">Content</label>
|
<label for="content">Content</label>
|
||||||
@@ -17,51 +17,57 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import articleService from "../../services/articleService";
|
import articleService from "../../services/articleService";
|
||||||
import authService from "../../services/authService";
|
import authService from "../../services/authService";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Write",
|
name: "Write",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: "",
|
||||||
content: '',
|
content: "",
|
||||||
isEdit: false
|
isEdit: false
|
||||||
}
|
};
|
||||||
},
|
|
||||||
async beforeCreate() {
|
|
||||||
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(this);
|
|
||||||
articleService.postArticle = articleService.postArticle.bind(this);
|
|
||||||
articleService.updateArticle = articleService.updateArticle.bind(this);
|
|
||||||
articleService.getArticle = articleService.getArticle.bind(this);
|
|
||||||
articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(this);
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
|
|
||||||
const id = this.$route.query.id;
|
|
||||||
if (id) {
|
|
||||||
await authService.banishIfUserUnAuthenticated();
|
|
||||||
const { title, content, user } = await articleService.getArticle(id);
|
|
||||||
await articleService.doseSessionHasPermission(user);
|
|
||||||
|
|
||||||
this.title = title;
|
|
||||||
this.content = content;
|
|
||||||
this.isEdit = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async create(evt) {
|
|
||||||
evt.preventDefault();
|
|
||||||
const {title, content} = this;
|
|
||||||
await articleService.postArticle({title, content});
|
|
||||||
},
|
},
|
||||||
async update(evt) {
|
async beforeCreate() {
|
||||||
evt.preventDefault();
|
authService.banishIfUserUnAuthenticated = authService.banishIfUserUnAuthenticated.bind(
|
||||||
const {title, content} = this;
|
this
|
||||||
await articleService.updateArticle(this.$route.query.id, {title, content});
|
);
|
||||||
|
articleService.postArticle = articleService.postArticle.bind(this);
|
||||||
|
articleService.updateArticle = articleService.updateArticle.bind(this);
|
||||||
|
articleService.getArticle = articleService.getArticle.bind(this);
|
||||||
|
articleService.doseSessionHasPermission = articleService.doseSessionHasPermission.bind(
|
||||||
|
this
|
||||||
|
);
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
const id = this.$route.query.id;
|
||||||
|
if (id) {
|
||||||
|
await authService.banishIfUserUnAuthenticated();
|
||||||
|
const {title, content, user} = await articleService.getArticle(id);
|
||||||
|
await articleService.doseSessionHasPermission(user);
|
||||||
|
|
||||||
|
this.title = title;
|
||||||
|
this.content = content;
|
||||||
|
this.isEdit = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async create(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
const {title, content} = this;
|
||||||
|
await articleService.postArticle({title, content});
|
||||||
|
},
|
||||||
|
async update(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
const {title, content} = this;
|
||||||
|
await articleService.updateArticle(this.$route.query.id, {
|
||||||
|
title,
|
||||||
|
content
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<router-link to="/">home</router-link>
|
<router-link to="/">home</router-link>
|
||||||
<form @submit="submit">
|
<form @submit="submit">
|
||||||
<input type="email" v-model="email">
|
<input type="email" v-model="email"/>
|
||||||
<input type="password" v-model="password">
|
<input type="password" v-model="password"/>
|
||||||
<button type="submit">확인</button>
|
<button type="submit">확인</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -17,32 +17,31 @@
|
|||||||
name: "Login",
|
name: "Login",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
email: '',
|
email: "",
|
||||||
password: ''
|
password: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
authApi.session = authApi.session.bind(this);
|
||||||
|
authService.login = authService.login.bind(this);
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
try {
|
||||||
|
await authApi.session();
|
||||||
|
await this.$router.replace("/articles");
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeCreate() {
|
methods: {
|
||||||
authApi.session = authApi.session.bind(this);
|
submit: async function (evt) {
|
||||||
authService.login = authService.login.bind(this);
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
try {
|
|
||||||
await authApi.session();
|
|
||||||
await this.$router.replace('/articles');
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submit: async function(evt) {
|
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
const { email, password } = this;
|
const {email, password} = this;
|
||||||
await authService.login(email,password);
|
await authService.login(email, password);
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<form @submit="register">
|
<form @submit="register">
|
||||||
<input type="email" v-model="email" placeholder="Email">
|
<input type="email" v-model="email" placeholder="Email"/>
|
||||||
<input type="text" v-model="name" placeholder="Name">
|
<input type="text" v-model="name" placeholder="Name"/>
|
||||||
<input type="password" v-model="password" placeholder="Password">
|
<input type="password" v-model="password" placeholder="Password"/>
|
||||||
<button type="submit">확인</button>
|
<button type="submit">확인</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -17,43 +17,34 @@
|
|||||||
name: "Register",
|
name: "Register",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
email: '',
|
email: "",
|
||||||
name: '',
|
name: "",
|
||||||
password: ''
|
password: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
authApi.register = authApi.register.bind(this);
|
||||||
|
authApi.session = authApi.session.bind(this);
|
||||||
|
|
||||||
|
authService.register = authService.register.bind(this);
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
try {
|
||||||
|
await authApi.session();
|
||||||
|
await this.$router.replace("/articles");
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeCreate() {
|
methods: {
|
||||||
authApi.register = authApi.register.bind(this);
|
register: async function (evt) {
|
||||||
authApi.session = authApi.session.bind(this);
|
|
||||||
|
|
||||||
authService.register = authService.register.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();
|
evt.preventDefault();
|
||||||
const { email, name, password } = this;
|
const {email, name, password} = this;
|
||||||
await authService.register({email, name, password});
|
await authService.register({email, name, password});
|
||||||
|
|
||||||
// try {
|
|
||||||
// await authApi.register({email, name, password});
|
|
||||||
// } catch (err) {
|
|
||||||
// if (err.response.status === 409) {
|
|
||||||
// alert('이미 존재하는 이메일입니다.');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -25,24 +25,23 @@
|
|||||||
export default {
|
export default {
|
||||||
name: "Info",
|
name: "Info",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
user: null,
|
user: null,
|
||||||
init: false
|
init: false
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
async beforeCreate() {
|
async beforeCreate() {
|
||||||
authApi.bind(this);
|
authApi.bind(this);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const { data } = await authApi.session();
|
const {data} = await authApi.session();
|
||||||
this.user = data;
|
this.user = data;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
await this.$router.replace('/auth/login');
|
await this.$router.replace("/auth/login");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -12,37 +12,37 @@ import Info from "../pages/me/Info";
|
|||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
export const router = new VueRouter({
|
export const router = new VueRouter({
|
||||||
mode: 'history',
|
mode: 'history',
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: Welcome
|
component: Welcome
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/auth/login',
|
path: '/auth/login',
|
||||||
component: Login
|
component: Login
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/auth/register',
|
path: '/auth/register',
|
||||||
component: Register
|
component: Register
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/articles',
|
path: '/articles',
|
||||||
component: Articles
|
component: Articles
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/articles/write',
|
path: '/articles/write',
|
||||||
name: 'WriteArticle',
|
name: 'WriteArticle',
|
||||||
component: WriteArticle
|
component: WriteArticle
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/articles/:id',
|
path: '/articles/:id',
|
||||||
name: 'DetailArticle',
|
name: 'DetailArticle',
|
||||||
component: DetailArticle
|
component: DetailArticle
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/me',
|
path: '/me',
|
||||||
component: Info
|
component: Info
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -3,71 +3,74 @@ import commonUtil from "../utils/commonUtil";
|
|||||||
import authApi from "../api/authApi";
|
import authApi from "../api/authApi";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
async getArticles({page = 0, size = 10}) {
|
async getArticles({page = 0, size = 10}) {
|
||||||
try {
|
try {
|
||||||
const result = await articleApi.getArticles({page, size}, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
const result = await articleApi.getArticles({
|
||||||
return result.data;
|
page,
|
||||||
} catch (err) {
|
size
|
||||||
alert('문제가 발생하였습니다.');
|
}, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
||||||
console.log(err.response);
|
return result.data;
|
||||||
}
|
} catch (err) {
|
||||||
},
|
alert('문제가 발생하였습니다.');
|
||||||
async getArticle(articleId) {
|
console.log(err.response);
|
||||||
try {
|
}
|
||||||
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
|
},
|
||||||
const result = await articleApi.getArticle({articleId}, authorization);
|
async getArticle(articleId) {
|
||||||
return result.data;
|
try {
|
||||||
} catch (e) {
|
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
|
||||||
alert('문제가 발생하였습니다.');
|
const result = await articleApi.getArticle({articleId}, authorization);
|
||||||
console.log(e);
|
return result.data;
|
||||||
}
|
} catch (e) {
|
||||||
},
|
alert('문제가 발생하였습니다.');
|
||||||
async removeArticle(articleId) {
|
console.log(e);
|
||||||
try {
|
}
|
||||||
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
|
},
|
||||||
await articleApi.removeArticle({articleId}, authorization);
|
async removeArticle(articleId) {
|
||||||
await this.$router.push('/articles');
|
try {
|
||||||
} catch (e) {
|
const authorization = commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken'));
|
||||||
alert('문제가 발생하였습니다.');
|
await articleApi.removeArticle({articleId}, authorization);
|
||||||
console.log(e);
|
await this.$router.push('/articles');
|
||||||
}
|
} catch (e) {
|
||||||
},
|
alert('문제가 발생하였습니다.');
|
||||||
async postArticle(data) {
|
console.log(e);
|
||||||
try {
|
}
|
||||||
await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
},
|
||||||
await this.$router.push('/articles');
|
async postArticle(data) {
|
||||||
} catch (err) {
|
try {
|
||||||
alert('문제가 발생하였습니다.');
|
await articleApi.postArticle(data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
||||||
console.log(err);
|
await this.$router.push('/articles');
|
||||||
}
|
} catch (err) {
|
||||||
},
|
alert('문제가 발생하였습니다.');
|
||||||
async updateArticle(id, data) {
|
console.log(err);
|
||||||
try {
|
}
|
||||||
await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
},
|
||||||
await this.$router.push("/articles/" + id);
|
async updateArticle(id, data) {
|
||||||
} catch (err) {
|
try {
|
||||||
alert('문제가 발생하였습니다.');
|
await articleApi.updateArticle(id, data, commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
||||||
console.log(err);
|
await this.$router.push("/articles/" + id);
|
||||||
}
|
} catch (err) {
|
||||||
},
|
alert('문제가 발생하였습니다.');
|
||||||
async doseSessionHasPermission(user) {
|
console.log(err);
|
||||||
let session = null;
|
}
|
||||||
|
},
|
||||||
|
async doseSessionHasPermission(user) {
|
||||||
|
let session = null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
const result = await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
||||||
session = result.data;
|
session = result.data;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
alert('문제가 발생하였습니다.');
|
alert('문제가 발생하였습니다.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (user.id !== session.id) {
|
if (user.id !== session.id) {
|
||||||
throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
|
throw new Error("현재 사용자가 해당 게시글에 권한이 없습니다.");
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
alert(err.message);
|
alert(err.message);
|
||||||
await this.$router.replace("/articles/" + this.$route.query.id);
|
await this.$router.replace("/articles/" + this.$route.query.id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -2,48 +2,48 @@ import authApi from "../api/authApi";
|
|||||||
import commonUtil from "../utils/commonUtil";
|
import commonUtil from "../utils/commonUtil";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
async login(email, password) {
|
async login(email, password) {
|
||||||
try {
|
try {
|
||||||
const result = await authApi.login({email, password});
|
const result = await authApi.login({email, password});
|
||||||
const { token } = result.data;
|
const {token} = result.data;
|
||||||
this.$cookie.set('accessToken', token, 1000);
|
this.$cookie.set('accessToken', token, 1000);
|
||||||
await this.$router.push('/articles');
|
await this.$router.push('/articles');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const message = err.response.data.message;
|
const message = err.response.data.message;
|
||||||
if (~message.indexOf('패스워드')) {
|
if (~message.indexOf('패스워드')) {
|
||||||
alert('패스워드가 일치하지 않습니다.');
|
alert('패스워드가 일치하지 않습니다.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async register(data) {
|
async register(data) {
|
||||||
try {
|
try {
|
||||||
await authApi.register(data);
|
await authApi.register(data);
|
||||||
alert('가입이 완료되었습니다. 로그인 해 주세요');
|
alert('가입이 완료되었습니다. 로그인 해 주세요');
|
||||||
await this.$router.push('/auth/login');
|
await this.$router.push('/auth/login');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (err.response.status === 409) {
|
if (err.response.status === 409) {
|
||||||
alert('이미 존재하는 이메일입니다.');
|
alert('이미 존재하는 이메일입니다.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async logout() {
|
async logout() {
|
||||||
try {
|
try {
|
||||||
this.$cookie.set('accessToken', null, 0);
|
this.$cookie.set('accessToken', null, 0);
|
||||||
await this.$router.push('/');
|
await this.$router.push('/');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async progressIfUserAuthenticated() {
|
async progressIfUserAuthenticated() {
|
||||||
|
|
||||||
},
|
},
|
||||||
async banishIfUserUnAuthenticated() {
|
async banishIfUserUnAuthenticated() {
|
||||||
try {
|
try {
|
||||||
await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
await authApi.session(commonUtil.getAuthenticationHeaderBearer(this.$cookie.get('accessToken')));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
|
alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
|
||||||
await this.$router.replace('/');
|
await this.$router.replace('/');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
getAuthenticationHeaderBearer(accessToken) {
|
getAuthenticationHeaderBearer(accessToken) {
|
||||||
return 'Bearer ' + accessToken;
|
return 'Bearer ' + accessToken;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user