vue2_frontend...
This commit is contained in:
parent
b4be4a7370
commit
7de78be248
@ -13,7 +13,7 @@
|
||||
<b-form-input
|
||||
:name="field.email.key"
|
||||
:type="field.email.type"
|
||||
v-model="form.email"
|
||||
v-model="email"
|
||||
:state="getValidationState(validationContext)"
|
||||
:placeholder="field.email.placeholder"
|
||||
></b-form-input>
|
||||
@ -32,7 +32,7 @@
|
||||
<b-form-input
|
||||
:name="field.password.key"
|
||||
:type="field.password.type"
|
||||
v-model="form.password"
|
||||
v-model="password"
|
||||
:state="getValidationState(validationContext)"
|
||||
:placeholder="field.password.placeholder"
|
||||
></b-form-input>
|
||||
@ -49,29 +49,25 @@
|
||||
|
||||
<script>
|
||||
// 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
|
||||
import { createNamespacedHelpers } from 'vuex'
|
||||
const authStore = createNamespacedHelpers('AuthStore')
|
||||
export default {
|
||||
data() {
|
||||
//console.log(this.$route)
|
||||
return {
|
||||
form: {
|
||||
email: null,
|
||||
password: null
|
||||
},
|
||||
field: {
|
||||
computed: {
|
||||
...authStore.mapState(['field']),
|
||||
email: {
|
||||
key: 'email',
|
||||
type: 'email',
|
||||
label: '로그인 메일',
|
||||
placeholder: 'sample@test.com',
|
||||
rules: { required: true, email: true }
|
||||
get() {
|
||||
return this.$store.state.AuthStore.form.email
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('AuthStore/email', value)
|
||||
}
|
||||
},
|
||||
password: {
|
||||
key: 'password',
|
||||
type: 'password',
|
||||
label: '로그인 암호',
|
||||
placeholder: 'password',
|
||||
rules: { required: true, min: 4, max: 20 }
|
||||
}
|
||||
get() {
|
||||
return this.$store.state.AuthStore.form.password
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('AuthStore/password', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -81,13 +77,13 @@ export default {
|
||||
},
|
||||
async onSubmit() {
|
||||
try {
|
||||
const params = { email: this.form.email, password: this.form.password }
|
||||
await this.$store.dispatch('AuthStore/login', params)
|
||||
//console.log(authStore)
|
||||
await this.$store.dispatch('AuthStore/login')
|
||||
await this.$router.push({
|
||||
name: this.$route.params.return_url || 'home'
|
||||
})
|
||||
} catch (e) {
|
||||
alert(e.response.data.message)
|
||||
alert(e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ import axios from 'axios'
|
||||
//import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
data: () => {
|
||||
return {
|
||||
form: {
|
||||
title: null,
|
||||
|
||||
@ -141,66 +141,10 @@ const todoStore = createNamespacedHelpers('TodoStore')
|
||||
export default {
|
||||
components: {},
|
||||
computed: {
|
||||
...todoStore.mapState(['total', 'rows'])
|
||||
...todoStore.mapState(['total', 'rows', 'fields'])
|
||||
},
|
||||
created: function () {
|
||||
this.setDatas()
|
||||
},
|
||||
data: function () {
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
{
|
||||
key: 'rowSelect',
|
||||
label: '✓',
|
||||
thStyle: { width: '55px', backgroundColor: 'yellow' }
|
||||
},
|
||||
{
|
||||
key: 'id',
|
||||
label: '번호',
|
||||
thStyle: { width: '75px' },
|
||||
variant: 'primary',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
label: '제목',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'content',
|
||||
label: '내용',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'is_done',
|
||||
label: '사용여부',
|
||||
thStyle: { width: '105px' },
|
||||
formatter: (value) => {
|
||||
return value == true ? 'YES' : 'NO'
|
||||
},
|
||||
Options: [
|
||||
{ text: '사용여부 선택', value: '' },
|
||||
{ text: 'YES', value: true },
|
||||
{ text: 'NO', value: false }
|
||||
],
|
||||
sortable: true,
|
||||
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||
},
|
||||
// { key: 'updateAt', label: '수정일' },
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '등록일',
|
||||
thStyle: { width: '125px' },
|
||||
formatter: (value) => {
|
||||
return value.replace(
|
||||
/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
|
||||
'$1-$2-$3'
|
||||
)
|
||||
},
|
||||
sortable: true,
|
||||
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||
}
|
||||
],
|
||||
page: 1, // 현재 페이지
|
||||
perPage: process.env.VUE_APP_TABLE_DEFAULT_PERPAGE, // 페이지당 보여줄 갯수
|
||||
perPageOptions: [
|
||||
|
||||
@ -10,7 +10,7 @@ const interceptor = (instance) => {
|
||||
//Request 처리용
|
||||
instance.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = tokenService.getLocalAccessToken()
|
||||
const token = tokenService.getAccessToken()
|
||||
if (token) {
|
||||
config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
|
||||
config.headers['x-access-token'] = token // for Node.js Express back-end
|
||||
@ -27,12 +27,10 @@ const interceptor = (instance) => {
|
||||
instance.interceptors.response.use(
|
||||
(response) => {
|
||||
console.log('interceptor 성공')
|
||||
//console.log(response)
|
||||
return response
|
||||
},
|
||||
async (err) => {
|
||||
console.log('interceptor 실패')
|
||||
//console.log(err)
|
||||
//err.config->이전에 보냈던 api (url등)정보 전달용
|
||||
//err.response->오류 상태를 알기 위해
|
||||
//originalConfig._retry는 처음 시도용인지 알기 위해
|
||||
@ -42,7 +40,7 @@ const interceptor = (instance) => {
|
||||
return await reloadAccessToken(originalConfig)
|
||||
}
|
||||
}
|
||||
return Promise.reject(err)
|
||||
return Promise.reject(err.response.data)
|
||||
}
|
||||
)
|
||||
|
||||
@ -54,11 +52,11 @@ const interceptor = (instance) => {
|
||||
//Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
|
||||
await authApi
|
||||
.post('/auth/reload', {
|
||||
refresh_token: tokenService.getLocalRefreshToken()
|
||||
refresh_token: tokenService.getRefreshToken()
|
||||
})
|
||||
.then((rs) => {
|
||||
const { access_token } = rs.data
|
||||
tokenService.updateLocalAccessToken(access_token)
|
||||
tokenService.updateAccessToken(access_token)
|
||||
})
|
||||
//Refresh Token도 expire되었으면 Login 처리
|
||||
|
||||
|
||||
@ -4,7 +4,28 @@ import tokenService from '../service/token.service'
|
||||
|
||||
// count state 속성 추가
|
||||
const state = {
|
||||
tokenService: tokenService
|
||||
tokenService: tokenService,
|
||||
form: {
|
||||
email: null,
|
||||
password: null,
|
||||
name: null
|
||||
},
|
||||
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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
const getters = {
|
||||
isAuthenticated: function (state) {
|
||||
@ -21,6 +42,15 @@ const getters = {
|
||||
}
|
||||
}
|
||||
const mutations = {
|
||||
email: function (state, email) {
|
||||
state.form.email = email
|
||||
},
|
||||
password: function (state, password) {
|
||||
state.form.password = password
|
||||
},
|
||||
name: function (state, name) {
|
||||
state.form.name = name
|
||||
},
|
||||
login: function (state, user) {
|
||||
state.tokenService.setUser(user)
|
||||
},
|
||||
@ -32,27 +62,34 @@ const mutations = {
|
||||
}
|
||||
}
|
||||
const actions = {
|
||||
register: async function (context, params) {
|
||||
register: async function (commit) {
|
||||
const params = {
|
||||
email: this.form.email,
|
||||
password: this.form.password,
|
||||
name: this.form.name
|
||||
}
|
||||
await api.post('/auth/register', params).then((response) => {
|
||||
const { data } = response
|
||||
if (data.access_token) {
|
||||
context.commit('login', data)
|
||||
commit('login', data)
|
||||
}
|
||||
})
|
||||
},
|
||||
login: async function (context, params) {
|
||||
login: async function ({ commit, state }) {
|
||||
const params = { email: state.form.email, password: state.form.password }
|
||||
console.log(params)
|
||||
await api.post('/auth/login', params).then((response) => {
|
||||
const { data } = response
|
||||
if (data.access_token) {
|
||||
context.commit('login', data)
|
||||
commit('login', data)
|
||||
}
|
||||
})
|
||||
},
|
||||
logout: function (context) {
|
||||
return context.commit('logout')
|
||||
logout: function (commit) {
|
||||
return commit('logout')
|
||||
},
|
||||
reload: function (context, access_token) {
|
||||
return context.commit('reload', access_token)
|
||||
reload: function (commit, access_token) {
|
||||
return commit('reload', access_token)
|
||||
}
|
||||
}
|
||||
export default { namespaced: true, state, getters, mutations, actions }
|
||||
|
||||
@ -1,7 +1,57 @@
|
||||
import api from '../interceptors/todo.api'
|
||||
const state = {
|
||||
total: 0,
|
||||
rows: []
|
||||
rows: [],
|
||||
fields: [
|
||||
{
|
||||
key: 'rowSelect',
|
||||
label: '✓',
|
||||
thStyle: { width: '55px', backgroundColor: 'yellow' }
|
||||
},
|
||||
{
|
||||
key: 'id',
|
||||
label: '번호',
|
||||
thStyle: { width: '75px' },
|
||||
variant: 'primary',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
label: '제목',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'content',
|
||||
label: '내용',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'is_done',
|
||||
label: '사용여부',
|
||||
thStyle: { width: '105px' },
|
||||
formatter: (value) => {
|
||||
return value == true ? 'YES' : 'NO'
|
||||
},
|
||||
Options: [
|
||||
{ text: '사용여부 선택', value: '' },
|
||||
{ text: 'YES', value: true },
|
||||
{ text: 'NO', value: false }
|
||||
],
|
||||
sortable: true,
|
||||
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||
},
|
||||
// { key: 'updateAt', label: '수정일' },
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '등록일',
|
||||
thStyle: { width: '125px' },
|
||||
formatter: (value) => {
|
||||
return value.replace(/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi, '$1-$2-$3')
|
||||
},
|
||||
sortable: true,
|
||||
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||
}
|
||||
]
|
||||
}
|
||||
const getters = {}
|
||||
const mutations = {
|
||||
@ -11,10 +61,10 @@ const mutations = {
|
||||
}
|
||||
}
|
||||
const actions = {
|
||||
setDatas: async function (context, params) {
|
||||
setDatas: async function (commit, params) {
|
||||
await api.get('/todo', { params: params }).then((response) => {
|
||||
const { data } = response
|
||||
context.commit('setDatas', data)
|
||||
commit('setDatas', data)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user