mindol1004/real-world-springboot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix : refactoring code, disunite API service and async function add. TODO watch Token statue because async state not recommend.

Browse Source
This commit is contained in:
kms
2022-12-01 01:08:05 +09:00
parent ce1e1ca573
commit aeb52fa2f4
7 changed files with 124 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/vite-frontend/src/api/index.ts Normal file
View File

@@ -0,0 +1,45 @@
import axios, {AxiosResponse} from "axios";
import { useStore } from "vuex";
//TODO
//임시방편 watch로 바라보는게 더 좋다고함. watch로 감시하자. Token
const getToken = () => {
let test = useStore().getters.getToken;
console.log(test)
return test;
}
const axiosService = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
})
const signUp = async (user: object): Promise<AxiosResponse> => {
return axiosService.post('/api/users',{user});
}
const signIn = async (user: object): Promise<AxiosResponse> => {
return axiosService.post('/api/users/login',{user})
}
const getCurrentUser = async (): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
return axiosService.get('/api/user', {
headers: {
Authorization: "TOKEN " + currentToken
}
})
}
const updateUser = async (user: object): Promise<AxiosResponse> => {
let currentToken = localStorage.getItem("token");
console.log(user);
console.log(currentToken);
return axiosService.put('/api/user', {user}, {
headers: {
Authorization: "TOKEN " + currentToken,
"Content-Type": `application/json`,
}
})
}
export { signUp, signIn, getCurrentUser, updateUser }

7
src/vite-frontend/src/store/index.ts
View File

@@ -1,4 +1,3 @@
import axios from "axios";
import { createStore } from 'vuex';
export default createStore({
@@ -12,7 +11,13 @@ export default createStore({
},
setToken(state, token){
state.token = token;
}
},
getters: {
getToken(state){
console.log(state.token);
return state.token;
}
},
actions: {
LOGIN({commit}, user){

4
src/vite-frontend/src/views/TheArticleDetail.vue
View File

@@ -225,6 +225,7 @@ export default defineComponent({
}
}).then(response => {
comment.body="";
getCommentList.comment.push(response.data.comment);
})
}
@@ -233,13 +234,12 @@ export default defineComponent({
axios.get(url + "/api/articles/" + props.slug,)
.then(response => {
articleDetail.article = response.data.article;
console.log(articleDetail.article);
})
axios.get(url + "/api/articles/" + props.slug + "/comments")
.then(response => {
getCommentList.comment = response.data.comments;
console.log(getCommentList.comment);
console.log(response);
})
})

26
src/vite-frontend/src/views/TheLogin.vue
View File

@@ -21,7 +21,7 @@
<fieldset class="form-group">
<input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
</fieldset>
<button @click = "signin" class="btn btn-lg btn-primary pull-xs-right">
<button @click = "Login" class="btn btn-lg btn-primary pull-xs-right">
Sign in
</button>
</form>
@@ -33,8 +33,8 @@
</template>
<script lang="ts">
import {reactive, ref} from "vue";
import axios from "axios";
import { reactive, ref } from "vue";
import { signIn } from "@/api";
import router from "@/router";
import { useStore } from "vuex";
@@ -51,25 +51,21 @@ export default {
let loginValidation = ref(false);
const signin = () => {
const url = import.meta.env.VITE_BASE_URL;
axios.post(url+'/api/users/login',{
user
})
.then(response => {
store.dispatch("LOGIN",response.data.user);
const Login = async () => {
try{
const { data } = await signIn(user);
store.dispatch("LOGIN",data.user);
router.push({name:"Home"});
})
.catch(error =>{
}catch(error: any){
const code = error.response.data.errors.code;
if(code == "EMAIL_NULL_OR_INVALID"){
loginValidation.value = true;
}else if(code == "PASSWORD_WORNG"){
}else if(code == "PASSWORD_WRONG"){
loginValidation.value = true;
}
})
};
}
return {user, loginValidation, signin};
return {user, loginValidation, Login};
}

26
src/vite-frontend/src/views/TheRegister.vue
View File

@@ -16,8 +16,6 @@
<ul class="error-messages" v-if="usernameDuplicate">
<li align="left">username has already been taken</li>
</ul>
<form>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username">
@@ -28,7 +26,7 @@
<fieldset class="form-group">
<input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
</fieldset>
<button @click = "signup" class="btn btn-lg btn-primary pull-xs-right">
<button @click = "register" class="btn btn-lg btn-primary pull-xs-right">
Sign up
</button>
</form>
@@ -41,9 +39,9 @@
<script lang="ts">
import axios from "axios";
import { signUp } from "@/api";
import router from "@/router";
import {reactive, ref} from "vue";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
export default {
@@ -73,16 +71,12 @@ export default {
emailDuplicate.value = false;
};
const signup = () => {
const url = import.meta.env.VITE_BASE_URL;
axios.post(url+'/api/users',{
user
})
.then(response => {
store.dispatch("LOGIN",response.data.user);
const register = async () => {
try{
const { data } = await signUp(user);
store.dispatch("LOGIN",data.user);
router.push({name:"Home"});
})
.catch(error =>{
}catch(error: any){
const code = error.response.data.errors.code;
if(code == "DUPLICATE_EMAIL_USERNAME"){
showEmailUsernameError();
@@ -91,10 +85,10 @@ export default {
}else if(code == "DUPLICATE_USERNAME"){
showUsernameError();
}
})
}
}
return { user, emailDuplicate, usernameDuplicate, signup, showEmailUsernameError,showEmailError, showUsernameError }
return { user, emailDuplicate, usernameDuplicate, register, showEmailUsernameError,showEmailError, showUsernameError }
},
}

57
src/vite-frontend/src/views/TheSetting.vue
View File

@@ -25,7 +25,7 @@
<fieldset class="form-group">
<input class="form-control form-control-lg" type="password" placeholder="Password" v-model="password">
</fieldset>
<button @click = "updateUser" class="btn btn-lg btn-primary pull-xs-right">
<button @click="setUser" class="btn btn-lg btn-primary pull-xs-right">
Update Settings
</button>
</fieldset>
@@ -42,16 +42,15 @@
</template>
<script lang="ts">
import axios from "axios";
import router from "@/router";
import { getCurrentUser, updateUser } from "@/api";
import { useStore } from "vuex";
import router from "@/router";
import { onMounted, reactive } from "vue";
export default {
name: "TheSetting",
setup() {
const url = import.meta.env.VITE_BASE_URL;
const token = localStorage.getItem("token");
const user = reactive({
bio: "",
email: "",
@@ -69,23 +68,21 @@ export default {
user.image = getuser.image
}
const updateUser = () => {
axios.put(url+'/api/user',{user},{
headers:{
Authorization : "TOKEN " + token,
"Content-Type": `application/json`,
}})
.then(response => {
store.dispatch("LOGIN",response.data.user);
const setUser = async () => {
try{
console.log(await updateUser(user));
/*
const { data } = await updateUser(user);
store.dispatch("LOGIN", data.user);
router.push({
name: 'Profile',
params: {username: response.data.user.username}})
})
.catch(error =>{
params: {username: data.user.username}
})*/
}catch(error:any){
// Todo Error처리
const code = error.response.data.errors.code;
//TODO 예외처리
})
console.log(code);
}
}
const logout = () =>{
@@ -95,22 +92,18 @@ export default {
}
onMounted(() => {
axios.get(url+'/api/user',{
headers:{
Authorization : "TOKEN " + token
onMounted(async () => {
try {
const { data } = await getCurrentUser();
store.dispatch("LOGIN", data.user)
getUser(data.user);
} catch (error: any) {
//TODO error처리
console.log(error);
}
})
.then(response => {
store.dispatch("LOGIN",response.data.user)
getUser(response.data.user);
})
.catch(error =>{
const code = error.response.data.errors.code;
//TODO 예외처리
})
})
return {user, password, url, token, getUser, updateUser, logout};
return {user, password, url, getUser, setUser, logout};
}
}
</script>

8
src/vite-frontend/vite.config.ts
View File

@@ -16,14 +16,6 @@ export default defineConfig({
server: {
https: true,
port: 4000,
proxy:{
'/': {
target : "http://3.35.44.58:8080",
rewrite: (path) => path.replace(/^\//,''),
changeOrigin: true,
secure: false
}
}
},
plugins: [vue(),basicSsl()]