Store_Vuex init...

This commit is contained in:
최준흠 2022-09-09 16:09:17 +09:00
parent 5fd60169bf
commit f4bc08d851
4 changed files with 63 additions and 19 deletions

View File

@ -79,21 +79,49 @@ export default {
getValidationState({ dirty, validated, valid = null }) { getValidationState({ dirty, validated, valid = null }) {
return dirty || validated ? valid : null return dirty || validated ? valid : null
}, },
onSubmit() { async onSubmit() {
this.$store try {
//1.
const accessToken = await this.getAccessToken()
//2. BackEnd
//console.log(accessToken)
await this.sendAccessToken(accessToken)
//3.next
const return_url = this.$route.params.return_url || 'home'
alert('로그인 성공..\n' + return_url)
this.$router.push({ name: return_url }).catch((e) => {
throw new Error(return_url + '로 Redirect 실패\n' + e.message)
})
} catch ({ message }) {
alert('로그인 실패...\n' + message)
}
},
async getAccessToken() {
return await this.$store
.dispatch('AuthStore/login', { .dispatch('AuthStore/login', {
email: this.form.email, email: this.form.email,
password: this.form.password password: this.form.password
}) })
.then((response) => { .then((response) => {
console.log(response) //console.log(response)
const return_url = this.$route.params.return_url || 'home' //alert(' ..')
alert('로그인 성공... -> ' + return_url) return response.data.access_token
this.$router.push({ name: return_url }).catch((e) => { })
console.log(e) .catch((e) => {
}) throw new Error('인증서버에서 인증코드 받기 실패..\n' + e.message)
})
},
async sendAccessToken(accessToken) {
return await this.$store
.dispatch('TodoStore/sendAccessToken', accessToken)
.then((response) => {
console.log(response)
alert('인증코드 전송 성공..')
return response.data
})
.catch((e) => {
throw new Error('인증코드 전송 실패..\n' + e.message)
}) })
.catch(({ message }) => alert('로그인 실패...:' + message))
} }
} }
} }

View File

@ -2,18 +2,18 @@ import axios from 'axios'
import jwt from './jwt' import jwt from './jwt'
//참조: https://yamoo9.github.io/axios/guide/interceptors.html //참조: https://yamoo9.github.io/axios/guide/interceptors.html
const authAxios = axios.create({ const apiServer = axios.create({
baseURL: process.env.VUE_APP_AUTH_HOST, baseURL: process.env.VUE_APP_AUTH_HOST,
headers: { 'content-type': 'application/json' } headers: { 'content-type': 'application/json' }
}) })
authAxios.interceptors.request.use( apiServer.interceptors.request.use(
(config) => jwt.getAuthorizationHeader(config), (config) => jwt.getAuthorizationHeader(config),
(error) => { (error) => {
// Do something with request error // Do something with request error
Promise.reject(error) Promise.reject(error)
} }
) )
authAxios.defaults.headers.post['Content-Type'] = apiServer.defaults.headers.post['Content-Type'] =
'application/x-www-form-urlencoded' 'application/x-www-form-urlencoded'
// count state 속성 추가 // count state 속성 추가
@ -50,7 +50,7 @@ const actions = {
password: payload.password password: payload.password
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
authAxios apiServer
.post('/auth/login', params) .post('/auth/login', params)
.then((response) => { .then((response) => {
const { data } = response const { data } = response
@ -79,8 +79,8 @@ const actions = {
name: payload.name name: payload.name
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
authAxios apiServer
.post('/user/register', params) .post('/auth/register', params)
.then((response) => { .then((response) => {
const { data } = response const { data } = response
context.commit('login', { context.commit('login', {

View File

@ -1,5 +1,6 @@
const Payload_KEY_NAME = 'access_token' const Payload_KEY_NAME = 'access_token'
const getToken = () => { const getToken = () => {
document.cookie.g
return window.localStorage.getItem(Payload_KEY_NAME) return window.localStorage.getItem(Payload_KEY_NAME)
} }
const saveToken = (token) => { const saveToken = (token) => {

View File

@ -2,18 +2,18 @@ import axios from 'axios'
import jwt from './jwt' import jwt from './jwt'
//참조: https://yamoo9.github.io/axios/guide/interceptors.html //참조: https://yamoo9.github.io/axios/guide/interceptors.html
const todoAxios = axios.create({ const apiServer = axios.create({
baseURL: process.env.VUE_APP_BACKEND_HOST, baseURL: process.env.VUE_APP_BACKEND_HOST,
headers: { 'content-type': 'application/json' } headers: { 'content-type': 'application/json' }
}) })
todoAxios.interceptors.request.use( apiServer.interceptors.request.use(
(config) => jwt.getAuthorizationHeader(config), (config) => jwt.getAuthorizationHeader(config),
(error) => { (error) => {
// Do something with request error // Do something with request error
Promise.reject(error) Promise.reject(error)
} }
) )
todoAxios.defaults.headers.post['Content-Type'] = apiServer.defaults.headers.post['Content-Type'] =
'application/x-www-form-urlencoded' 'application/x-www-form-urlencoded'
// count state 속성 추가 // count state 속성 추가
@ -36,11 +36,26 @@ const mutations = {
} }
} }
const actions = { const actions = {
sendAccessToken: function (context, accessToken) {
//주의 .get의 parameter는 { params: params} 처럼 보내야함
return new Promise((resolve, reject) => {
apiServer
.get('/todo/accessToken', { params: accessToken })
.then((response) => {
const { data } = response
context.commit('setData', data)
resolve(response)
})
.catch((error) => {
reject(error)
})
})
},
setData: function (context, params) { setData: function (context, params) {
console.log(params) console.log(params)
//주의 .get의 parameter는 { params: params} 처럼 보내야함 //주의 .get의 parameter는 { params: params} 처럼 보내야함
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
todoAxios apiServer
.get('/todo', { params: params }) .get('/todo', { params: params })
.then((response) => { .then((response) => {
const { data } = response const { data } = response