idcjp/vue2_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

수정2...

Browse Source
This commit is contained in:
최준흠 2022-09-01 17:19:59 +09:00
parent fc044053fe
commit e8b5fa65e5
5 changed files with 23 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@ -3,6 +3,7 @@
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
VUE_APP_AUTH_HOST="http://localhost:2000"
VUE_APP_BACKEND_HOST="http://localhost:3000"
VUE_APP_BACKEND_HEADERS_Content_Type="application/json;charset=utf-8"

13
src/components/common/LoginComponent.vue
View File

@ -89,12 +89,12 @@ export default {
console.log(result)
if (!result) {
console.log(result)
localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
sessionStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
alert('로그인 실패...')
//this.$router.back()
} else {
// localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다
localStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
sessionStorage.setItem(process.env.VUE_APP_LOCALSTORAGE_NAME, result)
alert('로그인 성공...')
//저장된 redirect path를 이용 이동시킴
this.$router.replace(
@ -121,17 +121,12 @@ export default {
},
async callAPI(url, params) {
console.log('CallAPI..', [url, params])
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
axios.defaults.baseURL = process.env.VUE_APP_AUTH_HOST
//전송 Header에 추가
const headers = {
// 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
// 'Access-Control-Allow-Origin':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
// 'Access-Control-Allow-Methods':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
Authorization:
'Bearer ' +
localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
}
return await axios
.post(url, params, headers)

7
src/components/todo/InputComponent.vue
View File

@ -142,14 +142,9 @@ export default {
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
//전송 Header에 추가
const headers = {
// 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
// 'Access-Control-Allow-Origin':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
// 'Access-Control-Allow-Methods':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
Authorization:
'Bearer ' +
localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
}
return await axios
.post(url, params, headers)

7
src/components/todo/ListComponent.vue
View File

@ -363,14 +363,9 @@ export default {
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
//전송 Header에 추가
const headers = {
// 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
// 'Access-Control-Allow-Origin':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
// 'Access-Control-Allow-Methods':
// process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
Authorization:
'Bearer ' +
localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
}
return await axios
.get(url, params, headers)

26
src/router/index.js
View File

@ -40,35 +40,41 @@ const routes = [
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
//base: process.env.BASE_URL,
routes
})
// 참고 :
// https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router
// https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/
// https://www.bottlehs.com/vue/vue-js-jwt-%EA%B8%B0%EB%B0%98-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%EC%A6%9D/
// 로그인 처리 과정용
// to : 이동할 url 정보가 담긴 라우터 객체
// from : 현재 url 정보가 담긴 라우터 객체
// next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수
//여기에서 login은 path가 아니라 name에서 찾는다
//router.beforeEach()를 호출하고 나면 모든 라우팅이 대기 상태가 된다
router.beforeEach((to, from, next) => {
//routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우
if (to.matched.some((record) => record.meta.requiredAuth)) {
//localStorage에 Access-Token이 없으면 Login페이지로 전송
if (!localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
console.log(from.path + ' => 인증않됨 => Login 페이지 이동')
//다음 이동할 URL 저장
console.log('라우딩 대기')
//1. routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우
if (to.matched.some((routeRecord) => routeRecord.meta.requiredAuth)) {
//2. 로그인 인증 않된 경우
//sessionStorage Access-Token이 없으면 Login페이지로 전송
if (!sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)) {
console.log(from.path + ' => 3. Login 페이지 이동 => 로그인 페이지')
//로그인 성공 후 이동할 URL 저장
sessionStorage.setItem(
process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME,
to.path
)
next({ name: 'login' })
} else {
//3. 로그인 인증완료
console.log(from.path + ' => 2. 이미인증완료 => ' + to.path)
next()
}
console.log(from.path + ' => 인증 통과 => ' + to.path)
next()
} else {
console.log(from.path + ' => 인증요구없으므로 통과 => ' + to.path)
console.log(from.path + ' => 1. 인증요구 없음 => ' + to.path)
next()
}
})