vue2_frontend...
This commit is contained in:
parent
f1598a47a2
commit
ce3ace2bd2
@ -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>
|
||||
<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'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
120
src/components/RegisterComponent.vue
Normal file
120
src/components/RegisterComponent.vue
Normal file
@ -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>
|
||||
@ -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' })
|
||||
|
||||
@ -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 다시 호출
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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')
|
||||
},
|
||||
|
||||
23
src/views/registerView.vue
Normal file
23
src/views/registerView.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user