vue2_frontend...

src/components/LoginComponent.vue

@@ -41,7 +41,8 @@
             }}</b-form-invalid-feedback>
           </b-input-group>
         </validation-provider>
-        <b-button type="submit" variant="primary">Login</b-button>
+        <b-button type="submit" variant="primary">Login</b-button>&nbsp;
+        <b-button variant="primary" @click="goRegister">Register</b-button>
       </b-form>
     </validation-observer>
   </div>
@@ -87,6 +88,11 @@ export default {
         console.log(e)
         alert(e.message)
       }
+    },
+    async goRegister() {
+      await this.$router.push({
+        name: 'register'
+      })
     }
   }
 }

src/components/RegisterComponent.vue

@@ -0,0 +1,120 @@
+<template>
+  <div style="width: 400px; height: 300px; text-align: center">
+    <!-- 참조: https://bootstrap-vue.org/docs/reference/validation#form-validation , npm install vee-validate@3 필요 -->
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form @submit.stop.prevent="handleSubmit(onSubmit)" class="sm">
+        <validation-provider
+          :name="field.email.label"
+          :rules="field.email.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.email.label }}</label>
+            <b-form-input
+              :name="field.email.key"
+              :type="field.email.type"
+              v-model="email"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.email.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <validation-provider
+          :name="field.password.label"
+          :rules="field.password.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.password.label }}</label>
+            <b-form-input
+              :name="field.password.key"
+              :type="field.password.type"
+              v-model="password"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.password.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <validation-provider
+          :name="field.name.label"
+          :rules="field.name.rules"
+          v-slot="validationContext"
+        >
+          <b-input-group>
+            <label class="input-group-text">{{ field.name.label }}</label>
+            <b-form-input
+              :name="field.name.key"
+              :type="field.name.type"
+              v-model="name"
+              :state="getValidationState(validationContext)"
+              :placeholder="field.name.placeholder"
+            ></b-form-input>
+            <b-form-invalid-feedback>{{
+              validationContext.errors[0]
+            }}</b-form-invalid-feedback>
+          </b-input-group>
+        </validation-provider>
+        <b-button type="submit" variant="primary">Register</b-button>
+      </b-form>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+// 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
+import { createNamespacedHelpers } from 'vuex'
+const authStore = createNamespacedHelpers('AuthStore')
+export default {
+  computed: {
+    ...authStore.mapState(['field']),
+    email: {
+      get() {
+        return this.$store.state.AuthStore.email
+      },
+      set(value) {
+        this.$store.commit('AuthStore/email', value)
+      }
+    },
+    password: {
+      get() {
+        return this.$store.state.AuthStore.password
+      },
+      set(value) {
+        this.$store.commit('AuthStore/password', value)
+      }
+    },
+    name: {
+      get() {
+        return this.$store.state.AuthStore.name
+      },
+      set(value) {
+        this.$store.commit('AuthStore/name', value)
+      }
+    }
+  },
+  methods: {
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    async onSubmit() {
+      try {
+        //console.log(authStore)
+        const params = { email: this.email, password: this.password }
+        await this.$store.dispatch('AuthStore/register', params)
+        await this.$router.push({
+          name: this.$route.params.return_url || 'home'
+        })
+      } catch (e) {
+        console.log(e)
+        alert(e.message)
+      }
+    }
+  }
+}
+</script>

src/components/layout/HeaderLayout.vue

@@ -37,7 +37,7 @@
             <template #button-content>
               <em>User</em>
             </template>
-            <b-dropdown-item href="/profile">Profile</b-dropdown-item>
+            <b-dropdown-item @click="profile()">Profile</b-dropdown-item>
             <b-dropdown-item @click="logout()">Sign Out</b-dropdown-item>
           </b-nav-item-dropdown>
         </template>
@@ -59,6 +59,15 @@ export default {
     ...authStore.mapGetters(['isAuthenticated'])
   },
   methods: {
+    async profile() {
+      try {
+        await this.$store
+          .dispatch('AuthStore/profile', {})
+          .then(() => this.redirect())
+      } catch (e) {
+        alert(e.message)
+      }
+    },
     async redirect() {
       if (!this.isAuthenticated && this.$router.name != 'home') {
         await this.$router.push({ name: 'home' })

src/interceptors/interceptor.js

@@ -60,6 +60,10 @@ const interceptor = (instance) => {
           const { access_token } = rs.data
           tokenService.updateAccessToken(access_token)
         })
+        .catch((err) => {
+          console.log(err)
+          throw new Error('로그인을 해주세요')
+        })
       //Refresh Token도 expire되었으면 Login 처리
 
       //reload로 access_token을 재발급을 받았으면 원래 APICall 다시 호출

src/router/index.js

@@ -27,6 +27,14 @@ const routes = [
         /* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/loginView.vue'
       )
   },
+  {
+    path: '/register',
+    name: 'register',
+    component: () =>
+      import(
+        /* webpackChunkName: "auth", webpackPrefetch:true */ '@/views/registerView.vue'
+      )
+  },
   {
     path: '/todo',
     name: 'todo',

src/store/auth.store.js

@@ -22,6 +22,13 @@ const state = {
       label: '로그인 암호',
       placeholder: 'password',
       rules: { required: true, min: 4, max: 20 }
+    },
+    name: {
+      key: 'name',
+      type: 'text',
+      label: '사용자 이름',
+      placeholder: 'name',
+      rules: { required: true, min: 4, max: 20 }
     }
   }
 }
@@ -81,6 +88,12 @@ const actions = {
       }
     })
   },
+  profile: async function () {
+    await api.get('/auth/profile').then((response) => {
+      const { data } = response
+      console.log(data)
+    })
+  },
   logout: function (context) {
     return context.commit('logout')
   },

src/views/registerView.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="wrapper">
+    <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
+    <RegisterComponent />
+  </div>
+</template>
+<script>
+import RegisterComponent from '@/components/RegisterComponent.vue'
+export default {
+  components: {
+    RegisterComponent
+  }
+}
+</script>
+<style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: white;
+}
+</style>