-
-
-
-
-
-
-
-
-
- Login
- Reset
-
-
- {{ form }}
-
+
+
+
+
+
+
+
+
+ {{
+ validationContext.errors[0]
+ }}
+
+
+
+
+
+
+ {{
+ validationContext.errors[0]
+ }}
+
+
+ Login
+ Reset
+
+
@@ -37,61 +56,76 @@ export default {
data() {
return {
form: {
- email: '',
- password: ''
+ email: null,
+ password: null
},
- show: true
+ field: {
+ email: {
+ key: 'email',
+ type: 'email',
+ label: '로그인 메일',
+ placeholder: 'sample@test.com',
+ rules: { required: true, email: true }
+ },
+ password: {
+ key: 'password',
+ type: 'password',
+ label: '로그인 암호',
+ placeholder: 'password',
+ rules: { required: true, min: 4, max: 20 }
+ }
+ }
}
},
methods: {
- async onSubmit(event) {
- event.preventDefault()
+ getValidationState({ dirty, validated, valid = null }) {
+ return dirty || validated ? valid : null
+ },
+ async onSubmit() {
+ const result = await this.callAPI(
+ '/auth/login',
+ JSON.stringify({
+ email: this.form.email,
+ password: this.form.password
+ })
+ )
+ if (result) {
+ // localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
+ localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
+ alert('로그인 성공...')
+ // this.$router.push('/')
+ } else {
+ console.log(result)
+ localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+ alert('로그인 실패...')
+ }
+ },
+ onReset() {
+ // Reset our form values
+ this.form.email = ''
+ this.form.pasword = ''
+ // Trick to reset/clear native browser form validation state
+ this.$nextTick(() => {
+ this.$refs.observer.reset()
+ })
+ },
+ async callAPI(url, params) {
+ console.log('CallAPI..', [url, params])
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
axios.defaults.headers.post['Content-Type'] =
process.env.VUE_APP_BACKEND_HEADERS_Content_Type
axios.defaults.headers.post['Access-Control-Allow-Origin'] =
process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
- await axios
- .post(
- '/auth/login',
- JSON.stringify({
- email: this.form.email,
- password: this.form.password
- })
- )
+ return await axios
+ .post(url, params)
.then((response) => {
// console.log(response)
- if (response.status === 201) {
- // 로그인 성공시 처리해줘야할 부분
- console.log(response.data)
- // this.$store.dispatch('authenticate', {
- // token: response.data.access_token,
- // expiration: response.data.expires_in + Date.now()
- // })
- localStorage.setItem(
- process.env.VUE_APP_LOCALSTORAGE_NAME,
- response.data.access_token
- )
- alert('로그인 성공...')
- // this.$router.push('/')
- }
+ return response.status === 201 ? response.data.access_token : null
})
.catch((err) => {
- localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
console.log(err)
- alert('로그인 실패...')
+ return null
})
- },
- onReset(event) {
- event.preventDefault()
- // Reset our form values
- this.form.email = ''
- this.form.pasword = ''
- // Trick to reset/clear native browser form validation state
- this.show = false
- this.$nextTick(() => {
- this.show = true
- })
}
}
}
diff --git a/src/components/layout/HeaderLayout.vue b/src/components/layout/HeaderLayout.vue
index 2c2ca2d..f8fa8f4 100644
--- a/src/components/layout/HeaderLayout.vue
+++ b/src/components/layout/HeaderLayout.vue
@@ -22,7 +22,7 @@
Link
- Todo
+ Todo