Merge branch 'master' into 메뉴_등록

owner-vue/src/api/auth.js

@@ -0,0 +1,26 @@
+import axios from "axios";
+import jwt from "@/common/jwt";
+
+export default {
+  async requestReissue() {
+    const config = {
+      headers: {
+        "X-AUTH-TOKEN": jwt.getToken()
+      }
+    }
+
+    const res = await axios.get("http://localhost:8001/user-service/auth/reissue", config);
+
+    const accessToken = res.data.data.accessToken;
+    jwt.saveToken(accessToken);
+    jwt.saveExpiredTime(res.data.data.expiredTime);
+    axios.defaults.headers.common['Authorization'] =  "Bearer " + accessToken;
+
+    return accessToken;
+  },
+  requestCheckAccessToken() {
+    axios.defaults.headers.common['Authorization'] =  "Bearer " + jwt.getToken();
+
+    return axios.get("http://localhost:8001/user-service/auth/check/access-token");
+  }
+}

owner-vue/src/api/user.js

@@ -1,8 +1,32 @@
-import axios from "axios";
+import jwt from '../common/jwt.js';
 
 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
     }
-}
+
+    try {
+      const response = await axios.post("http://localhost:8001/user-service/login", user);
+      const data = response.data.data;
+
+      jwt.saveToken(data.accessToken);
+      jwt.saveExpiredTime(data.expiredTime);
+
+      axios.defaults.headers.common['Authorization'] =  "Bearer " + data.accessToken;
+
+      return true;
+    } catch (err) {
+      console.log("Error = ", err);
+      return false;
+    }
+
+  }
+}
+
+import axios from "axios";

owner-vue/src/common/jwt.js

@@ -0,0 +1,38 @@
+
+const moment = require('moment');
+const ACCESS_TOKEN_NAME = "accessToken";
+const EXPIRED_TIME_NAME = "expiredTime";
+
+const tag = "[jwt]";
+
+export default {
+  getToken() {
+    return localStorage.getItem(ACCESS_TOKEN_NAME);
+  },
+  saveToken(token) {
+    localStorage.setItem(ACCESS_TOKEN_NAME, token);
+  },
+  getExpiredTime() {
+    return localStorage.getItem(EXPIRED_TIME_NAME);
+  },
+  saveExpiredTime(expiredTime) {
+    localStorage.setItem(EXPIRED_TIME_NAME, expiredTime);
+  },
+  destroyAll() {
+    localStorage.removeItem(ACCESS_TOKEN_NAME);
+    localStorage.removeItem(EXPIRED_TIME_NAME);
+  },
+  isExpired() {
+    const expiredTime = this.getExpiredTime();
+
+    const expiredMoment = moment(expiredTime);
+    let currentMoment = moment();
+
+    const difference = moment.duration(expiredMoment.diff(currentMoment)).asSeconds();
+
+    console.log(tag, "expireMoment = ", expiredMoment, "currentMoment = ", currentMoment, "diff = ", difference);
+
+    // 만료 30초 전일 경우 만료로 판단
+    return difference <= 30;
+  }
+}

owner-vue/src/main.js

@@ -1,10 +1,11 @@
-import Vue from 'vue'
-import App from './App.vue'
-import vuetify from './plugins/vuetify'
-import router from './router'
+import Vue from 'vue';
+import App from './App.vue';
+import vuetify from './plugins/vuetify';
+import router from './router';
 import axios from "axios";
-import customUtil from './util/customUtil'
+import auth from "./api/auth.js";
 
+axios.defaults.withCredentials = true;
 
 Vue.config.productionTip = false
 Vue.prototype.$axios = axios;
@@ -17,3 +18,29 @@ new Vue({
   router,
   render: h => h(App)
 }).$mount('#app')
+
+axios.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401) {
+      let code = error.response.data.code;
+      if (code === "EXPIRED") {
+        console.log("## expired");
+        try {
+          const accessToken = await auth.requestReissue();
+          originalRequest.headers.Authorization = "Bearer " + accessToken;
+          return axios(originalRequest);
+        } catch (reissueError) {
+          window.location.href = "http://localhost:8080";
+          alert("권한이 없습니다. 다시 로그인 해주세요");
+        }
+       }
+      window.location.href = "http://localhost:8080";
+      alert("권한이 없습니다. 다시 로그인해주세요.");
+    }
+    return Promise.reject(error);
+  }
+);

owner-vue/src/router/index.js

@@ -4,13 +4,30 @@ import VueRouter from 'vue-router'
 import DashboardLayout from "@/views/Layout/DashboardLayout";
 import AuthLayout from "@/views/Layout/AuthLayout";
 
+import jwt from "../common/jwt.js";
+import auth from "../api/auth.js";
+
 Vue.use(VueRouter)
 
+const authCheck = async function (to, from, next) {
+  try {
+    if (jwt.isExpired()) {
+      // refresh 호출
+      await auth.requestReissue();
+    } else {
+      await auth.requestCheckAccessToken();
+    }
+  } catch (error) {
+    await router.replace("/login");
+  }
+  next();
+};
 const routes = [
   {
     path: '/dashboard',
     redirect: 'dashboard',
     component: DashboardLayout,
+    beforeEnter: authCheck,
     children: [
       {
         path: "/dashboard",
@@ -64,4 +81,4 @@ const router = new VueRouter({
   routes
 })
 
-export default router
+export default router

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>