user.js
5.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
import Cookie from 'js-cookie';
export const state = () => ({
me: null,
});
export const mutations = {
loadMe(state, payload) {
const {user} = payload;
state.me = user;
},
login(state, payload) {
const {user} = payload;
state.me = user;
},
logout(state) {
state.me = null;
}
};
export const actions = {
//mutation{commit} 호출
loadMe({commit}, payload) {
return new Promise(async (resolve, reject) => {
try {
const {cookie} = payload;
this.$axios.defaults.headers.common['Authorization'] = `Token ${cookie}`;
const res = await this.$axios.get('http://54.180.112.94:8080/api/auth/loadMe', {
withCredentials: true
});
commit('loadMe', {user: res.data});
return resolve();
} catch (e) {
console.error(e);
return reject(e);
}
})
},
/* signUp */
signUp({commit}, payload) {
return new Promise(async (resolve, reject) => {
try {
const {email, username, password} = payload;
const res = await this.$axios.post('http://54.180.112.94:8080/api/auth/signUp', {
email, username, password
}, {
withCredentials: true
});
const {user, token} = res.data;
if (process.browser) {
localStorage.setItem('accessToken', token);
Cookie.set('accessToken', token);
console.log(localStorage);
}
commit('login', {user});
return resolve();
} catch (e) {
console.log(res.data);
console.error(e);
return reject(e);
}
})
},
/* login */
login({commit}, payload) {
return new Promise(async (resolve, reject) => {
try {
console.log(payload)
const {username, password} = payload;
console.log('login 실행');
const res = await this.$axios.post('http://54.180.112.94:8080/api/auth/login', {
username,password
}, {
withCredentials: true
});
console.log(res);
// # 접근 성공 시, 토큰 값이 반환된다.
// 토큰을 헤더 정보에 포함시켜서 유저 정보를 요청
// 토큰을 로컬 스토리지에 저장
const {user, token} = res.data;
// console.log(user, token);
if (process.browser) {
localStorage.setItem('accessToken', token);
Cookie.set('accessToken', token);
console.log(localStorage);
}
/*
login({commit}, payload) {
return new Promise(async (resolve, reject) => {
try {
const {username, password} = payload;
console.log('login 실행');
const res = await this.$axios.post('ec2-54-180-112-94.ap-northeast-2.compute.amazonaws.com:8000/rest-a
uth/google', {
username, password
}, {
withCredentials: true
});
console.log(res);
// # 접근 성공 시, 토큰 값이 반환된다.
// 토큰을 헤더 정보에 포함시켜서 유저 정보를 요청
// 토큰을 로컬 스토리지에 저장
const {user, token} = res.data;
console.log(user, token);
if (process.browser) {
localStorage.setItem('accessToken', token);
Cookie.set('accessToken', token);
console.log(localStorage);
}
*/
commit('login', {user});
return resolve();
} catch (e) {
console.error(e);
return reject(e);
}
});
},
/* logout */
logout({commit}) {
return new Promise(async (resolve, reject) => {
try {
// await this.$axios.get('http://127.0.0.1:8000/user/logout', {
// withCredentials: true
// });
if (process.browser) {
localStorage.removeItem('accessToken');
Cookie.remove('accessToken');
}
commit('logout');
return resolve();
} catch (e) {
console.error(e);
return reject(e);
}
})
},
socialLogin({commit}){
console.log('zz')
console.log(this)
return new Promise(async (resolve, reject) => {
try{
const res = await this.$axios.post('http://ec2-54-180-112-94.ap-northeast-2.compute.amazonaws.com:8080/accounts/google/login/callback/main/',{ withCredentials: true });
console.log(res);
}catch(e){
console.error(e);
return reject(e);
}
})
}
};
// mutations -> 함수 인자로 (state, payload) => state / payload -> actions
// actions -> 함수 인자로 ({commit}, payload) => commit mutations / payload
// new Promise -> 비동기, 동기
// 동기
// 동시에 처리된다는 말은 실행되고 결과가 무조건 동시에 나와야한다는 뜻이야
// print(1) print(2) print(3) => 1, 2, 3
// 비동기
// print(1) print(2, => 1초) print(3) => 1,3,2 (default)
// Promise 비동기식 작업을 처리한다
// 로그인 요청 => 서버로 로그인 데이터를 보내주세요 => 서버로부터 온 데이터를 mutation을 통해 state.me의 값을 수정해주세요
// 그 작업을 비동기적으로 실행되는 작업을 처리하겠다 => Promise ( 순차적으로 실행되게 하는거야 ) =>
// Username, password => user 정보가 오지 않았어 (성공, 실패) => user: null 인 상태에서 state.me 수정해버리는 거야 => user 정보가 오는거야
// 그래서 뭐를 하냐 new Promise => 내부에 로직같은걸로 무조건 기다려야 하는 작업에 기다리라는 속성을 줘! 서버에서 user 정보를 받아와야 하는 작업에 user정보가 올때까지 기다려 라는 로직같은 걸 줘!
// return new Promise( async(resolve, reject)=> {
// try{
//
// }catch (e) {
//
// }
// })