diff --git a/.env b/.env index 8ed8e52..9a3809f 100644 --- a/.env +++ b/.env @@ -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" diff --git a/src/components/common/LoginComponent.vue b/src/components/common/LoginComponent.vue index 3d081ea..579ab08 100644 --- a/src/components/common/LoginComponent.vue +++ b/src/components/common/LoginComponent.vue @@ -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) diff --git a/src/components/todo/InputComponent.vue b/src/components/todo/InputComponent.vue index 8a34791..b8ef7f4 100644 --- a/src/components/todo/InputComponent.vue +++ b/src/components/todo/InputComponent.vue @@ -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) diff --git a/src/components/todo/ListComponent.vue b/src/components/todo/ListComponent.vue index 816c973..ef6c354 100644 --- a/src/components/todo/ListComponent.vue +++ b/src/components/todo/ListComponent.vue @@ -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) diff --git a/src/router/index.js b/src/router/index.js index df5a011..04b22a5 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -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() } })