From 731e79ece6a0a0cb625ea6351c16800d7c2890e9 Mon Sep 17 00:00:00 2001
From: bum12ark <bum12ark@gmail.com>
Date: Fri, 25 Feb 2022 12:37:00 +0900
Subject: [PATCH] =?UTF-8?q?feat(owner-vue):=20=EC=A0=90=EC=A3=BC=EC=9A=A9?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20-=20=ED=99=94=EB=A9=B4,=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 이메일, 패스워드 유효성 검사
- 로그인 성공 시 default header 설정
---
 owner-vue/src/api/user.js         | 32 +++++++++++++---
 owner-vue/src/views/LoginUser.vue | 61 +++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 owner-vue/src/views/LoginUser.vue

diff --git a/owner-vue/src/api/user.js b/owner-vue/src/api/user.js
index 50ad23c..0e1fff5 100644
--- a/owner-vue/src/api/user.js
+++ b/owner-vue/src/api/user.js
@@ -1,8 +1,30 @@
-import axios from "axios";
-
 export default {
+  requestRegisterUser(user) {
+    return axios.post("http://localhost:8001/user-service/store-owner", user);
+  },
 
-    requestRegisterUser(user) {
-        return axios.post("http://localhost:8001/user-service/store-owner", user);
+  async requestLoginUser(email, password) {
+    const user = {
+      email: email,
+      password: password
     }
-}
\ No newline at end of file
+
+    try {
+      const response = await axios.post("http://localhost:8001/user-service/login", user);
+      console.log(response);
+      const AUTH_TOKEN = response.data.data.access_token;
+      localStorage.setItem('access_token', AUTH_TOKEN);
+      axios.defaults.headers.common['Authorization'] =  AUTH_TOKEN;
+
+      return true;
+    } catch (err) {
+      console.log("Error = ", err);
+      alert("로그인 실패!");
+
+      return false;
+    }
+
+  }
+}
+
+import axios from "axios";
diff --git a/owner-vue/src/views/LoginUser.vue b/owner-vue/src/views/LoginUser.vue
new file mode 100644
index 0000000..2496b06
--- /dev/null
+++ b/owner-vue/src/views/LoginUser.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-card width="800" class="mx-auto mt-5">
+    <v-card-title>
+      <h1>Login</h1>
+    </v-card-title>
+    <v-card-text>
+      <v-form ref="form" lazy-validation>
+        <v-text-field
+            v-model="email"
+            :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
+            label="이메일"
+            prepend-icon="mdi-account-circle"
+        ></v-text-field>
+        <v-text-field
+            v-model="password"
+            :rules="[v => !!v || '비밀번호는 필수 값입니다']"
+            label="비밀번호"
+            type="Password"
+            prepend-icon="mdi-lock"
+            append-icon="mdi-eye-off"
+        ></v-text-field>
+      </v-form>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-btn color="success" v-on:click="links('/register')">Register</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn color="info" v-on:click="login">Login</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import userApi from '../api/user.js'
+
+export default {
+  name: "LoginUser",
+  data: function() {
+    return {
+      email: 'owner@gmail.com',
+      password: '1234'
+    }
+  },
+  methods: {
+    links: function(url) {
+      this.$router.push(url);
+    },
+    login: async function() {
+      if (!this.$refs.form.validate()) return;
+
+      const flag = await userApi.requestLoginUser(this.email, this.password);
+
+      if (flag) await this.$router.push('/prev-order');
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file