박민혁
2024-08-22
240822 박민혁 로그인 기능 추가
@6f4372c63ec9068fe7fe4fd4d25db84af2a89a4d
--- client/views/Login.vue
+++ client/views/Login.vue
... | ... | @@ -43,7 +43,7 @@ |
| 43 | 43 |
|
| 44 | 44 |
</button> |
| 45 | 45 |
</div> |
| 46 |
- <div class="tab-box" v-show="selectedTab !== 'tab3' && selectedTab !== 'tab4'"> |
|
| 46 |
+ <div class="tab-box" v-show="selectedTab !== 'tab3' && selectedTab !== 'tab4'"> |
|
| 47 | 47 |
<label class="mr20 title1"> |
| 48 | 48 |
<input type="radio" v-model="selectedTab" value="tab1" /> |
| 49 | 49 |
아이디 찾기 |
... | ... | @@ -52,7 +52,7 @@ |
| 52 | 52 |
<input type="radio" v-model="selectedTab" value="tab2" /> |
| 53 | 53 |
비밀번호 찾기 |
| 54 | 54 |
</label> |
| 55 |
- </div> |
|
| 55 |
+ </div> |
|
| 56 | 56 |
<!-- 아이디 찾기 --> |
| 57 | 57 |
<form @submit.prevent="submitForm" class="find-form mt30" v-if="selectedTab === 'tab1'"> |
| 58 | 58 |
<div class="mb20 flex justify-between align-center"> |
... | ... | @@ -61,10 +61,12 @@ |
| 61 | 61 |
</div> |
| 62 | 62 |
<div class="mb30 flex justify-between align-center"> |
| 63 | 63 |
<p class="title2" for="username" style="width: 12rem;">전화번호</p> |
| 64 |
- <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" |
|
| 65 |
- type="text" id="username" v-model="username"> |
|
| 66 |
- <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 67 |
- <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 64 |
+ <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" |
|
| 65 |
+ style="width: 12rem;" type="text" id="username" v-model="username"> |
|
| 66 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" |
|
| 67 |
+ v-model="username"> |
|
| 68 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" |
|
| 69 |
+ v-model="username"> |
|
| 68 | 70 |
</div> |
| 69 | 71 |
</div> |
| 70 | 72 |
<div class="flex justify-center "> |
... | ... | @@ -88,10 +90,12 @@ |
| 88 | 90 |
</div> |
| 89 | 91 |
<div class="mb30 flex justify-between align-center"> |
| 90 | 92 |
<p class="title2" for="username" style="width: 12rem;">전화번호</p> |
| 91 |
- <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" |
|
| 92 |
- type="text" id="username" v-model="username"> |
|
| 93 |
- <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 94 |
- <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 93 |
+ <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" |
|
| 94 |
+ style="width: 12rem;" type="text" id="username" v-model="username"> |
|
| 95 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" |
|
| 96 |
+ v-model="username"> |
|
| 97 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" |
|
| 98 |
+ v-model="username"> |
|
| 95 | 99 |
</div> |
| 96 | 100 |
</div> |
| 97 | 101 |
<div class="flex justify-center "> |
... | ... | @@ -104,7 +108,7 @@ |
| 104 | 108 |
</div> |
| 105 | 109 |
</form> |
| 106 | 110 |
<!-- 아이디 찾기 결과 --> |
| 107 |
- <div v-else-if="selectedTab === 'tab3'"> |
|
| 111 |
+ <div v-else-if="selectedTab === 'tab3'"> |
|
| 108 | 112 |
<div class="flex justify-center mt30"> |
| 109 | 113 |
<p class="title2">아이디 찾기가 완료 되었습니다.</p> |
| 110 | 114 |
</div> |
... | ... | @@ -123,9 +127,9 @@ |
| 123 | 127 |
로그인 하기 |
| 124 | 128 |
</button> |
| 125 | 129 |
</div> |
| 126 |
- </div> |
|
| 130 |
+ </div> |
|
| 127 | 131 |
<!-- 비밀번호 찾기 결과 --> |
| 128 |
- <div v-else-if="selectedTab === 'tab4'"> |
|
| 132 |
+ <div v-else-if="selectedTab === 'tab4'"> |
|
| 129 | 133 |
<div class="flex justify-center mt30"> |
| 130 | 134 |
<p class="title2">비밀번호 찾기가 완료 되었습니다.</p> |
| 131 | 135 |
</div> |
... | ... | @@ -144,7 +148,7 @@ |
| 144 | 148 |
로그인 하기 |
| 145 | 149 |
</button> |
| 146 | 150 |
</div> |
| 147 |
- </div> |
|
| 151 |
+ </div> |
|
| 148 | 152 |
</div> |
| 149 | 153 |
</div> |
| 150 | 154 |
</template> |
... | ... | @@ -170,56 +174,60 @@ |
| 170 | 174 |
submitForm() {
|
| 171 | 175 |
console.log('Username:', this.username);
|
| 172 | 176 |
console.log('Password:', this.password);
|
| 173 |
- |
|
| 177 |
+ |
|
| 174 | 178 |
const vm = this; |
| 175 | 179 |
|
| 176 | 180 |
axios({
|
| 177 |
- url: "/auth/login.json", |
|
| 178 |
- method: "post", |
|
| 179 |
- data: {
|
|
| 180 |
- loginId: this.username, |
|
| 181 |
- password: this.password, |
|
| 182 |
- }, |
|
| 183 |
- }).then(function (response) {
|
|
| 184 |
- const token = response.headers.get('Authorization');
|
|
| 185 |
- store.dispatch('login', token);
|
|
| 186 |
- vm.branchPage(); |
|
| 187 |
- }).catch(function (error) {
|
|
| 188 |
- console.log(error); |
|
| 189 |
- }); |
|
| 181 |
+ url: "/auth/login.json", |
|
| 182 |
+ method: "post", |
|
| 183 |
+ data: {
|
|
| 184 |
+ loginId: this.username, |
|
| 185 |
+ password: this.password, |
|
| 186 |
+ }, |
|
| 187 |
+ }).then(function (response) {
|
|
| 188 |
+ const token = response.headers.get('Authorization');
|
|
| 189 |
+ store.dispatch('login', token);
|
|
| 190 |
+ vm.branchPage(); |
|
| 191 |
+ }).catch(function (error) {
|
|
| 192 |
+ alert("아이디나 비밀번호가 잘못됐습니다 !");
|
|
| 193 |
+ console.log(error); |
|
| 194 |
+ }); |
|
| 190 | 195 |
|
| 191 | 196 |
}, |
| 192 | 197 |
branchPage() {
|
| 193 | 198 |
const vm = this; |
| 194 | 199 |
const token = localStorage.getItem('token');
|
| 195 | 200 |
axios.post('/auth/validateToken.json', {}, {
|
| 196 |
- headers: {
|
|
| 197 |
- Authorization: token |
|
| 198 |
- } |
|
| 199 |
- }).then(response => {
|
|
| 200 |
- if (response.data.status === 'success') {
|
|
| 201 |
- const userInfo = response.data.userInfo; |
|
| 202 |
- store.commit('setToken', token);
|
|
| 203 |
- store.commit('setUser', userInfo.usid);
|
|
| 204 |
- store.commit('setAuthcd', userInfo.author[0].authorCode);
|
|
| 205 |
- const roles = userInfo.author.map(role => role.authorCode); |
|
| 201 |
+ headers: {
|
|
| 202 |
+ Authorization: token |
|
| 203 |
+ } |
|
| 204 |
+ }).then(response => {
|
|
| 205 |
+ if (response.data.status === 'success') {
|
|
| 206 |
+ const userInfo = response.data.userInfo; |
|
| 207 |
+ store.commit('setToken', token);
|
|
| 208 |
+ store.commit('setUser', userInfo.usid);
|
|
| 209 |
+ store.commit('setAuthcd', userInfo.author[0].authorCode);
|
|
| 210 |
+ const roles = userInfo.author.map(role => role.authorCode); |
|
| 206 | 211 |
|
| 207 |
- // 학생은 Main_t로 접근할 수 없음 |
|
| 208 |
- if (roles.includes("STUDENT")) {
|
|
| 209 |
- vm.goToPage('Dashboard');
|
|
| 210 |
- } |
|
| 211 |
- // 선생님은 Main으로 접근할 수 없음 |
|
| 212 |
- else if (roles.includes("TEACHER")) {
|
|
| 213 |
- vm.goToPage('Board');
|
|
| 214 |
- } |
|
| 215 |
- // 부모님은 Main으로 접근할 수 없음 |
|
| 216 |
- else if (roles.includes("PARENT")) {
|
|
| 217 |
- vm.goToPage('Main_p');
|
|
| 218 |
- } |
|
| 219 |
- } |
|
| 220 |
- }).catch(error => {
|
|
| 221 |
- console.error(error); |
|
| 222 |
- }); }, |
|
| 212 |
+ // 학생은 Main_t로 접근할 수 없음 |
|
| 213 |
+ if (roles.includes("STUDENT")) {
|
|
| 214 |
+ vm.goToPage('Dashboard');
|
|
| 215 |
+ } |
|
| 216 |
+ // 선생님은 Main으로 접근할 수 없음 |
|
| 217 |
+ else if (roles.includes("TEACHER")) {
|
|
| 218 |
+ vm.goToPage('Board');
|
|
| 219 |
+ } |
|
| 220 |
+ // 부모님은 Main으로 접근할 수 없음 |
|
| 221 |
+ else if (roles.includes("PARENT")) {
|
|
| 222 |
+ vm.goToPage('Main_p');
|
|
| 223 |
+ } else if (roles.includes("ADMIN")) {
|
|
| 224 |
+ vm.goToPage('Dashboard');
|
|
| 225 |
+ } |
|
| 226 |
+ } |
|
| 227 |
+ }).catch(error => {
|
|
| 228 |
+ console.error(error); |
|
| 229 |
+ }); |
|
| 230 |
+ }, |
|
| 223 | 231 |
closeModal() {
|
| 224 | 232 |
this.showModal = false; |
| 225 | 233 |
}, |
... | ... | @@ -231,8 +239,8 @@ |
| 231 | 239 |
|
| 232 | 240 |
}, |
| 233 | 241 |
goToPage(page) {
|
| 234 |
- this.$router.push({ name: page });
|
|
| 235 |
- }, |
|
| 242 |
+ this.$router.push({ name: page });
|
|
| 243 |
+ }, |
|
| 236 | 244 |
|
| 237 | 245 |
}, |
| 238 | 246 |
components: {
|
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -1,6 +1,8 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div class="header flex justify-end"> |
| 3 |
- <img src="../../resources/img/setting.png" alt="" /> |
|
| 3 |
+ <div class="setting" @click="logout"> |
|
| 4 |
+ <img src="../../resources/img/setting.png" alt="" /> |
|
| 5 |
+ </div> |
|
| 4 | 6 |
<div class="notice" @click="buttonSearch"> |
| 5 | 7 |
<img src="../../resources/img/icon2.png" alt="" /> |
| 6 | 8 |
<p>{{ unCheck }}</p>
|
... | ... | @@ -11,38 +13,18 @@ |
| 11 | 13 |
<div class="flex mb10 justify-between"> |
| 12 | 14 |
<p class="popup-title">알림</p> |
| 13 | 15 |
<button type="button" class="popup-close-btn" @click="closeBtn"> |
| 14 |
- <svg-icon |
|
| 15 |
- type="mdi" |
|
| 16 |
- :path="mdiWindowClose" |
|
| 17 |
- class="close-btn" |
|
| 18 |
- ></svg-icon> |
|
| 16 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 19 | 17 |
</button> |
| 20 | 18 |
</div> |
| 21 |
- <article |
|
| 22 |
- class="flex justify-between mt20" |
|
| 23 |
- v-for="(item, index) in dataList" |
|
| 24 |
- :key="item.id" |
|
| 25 |
- :class="{ 'selected-row': selectedRow == item.dataList }"
|
|
| 26 |
- > |
|
| 27 |
- <img |
|
| 28 |
- style="width: fit-content" |
|
| 29 |
- src="../../resources/img/img200_13p.png" |
|
| 30 |
- alt="" |
|
| 31 |
- /> |
|
| 19 |
+ <article class="flex justify-between mt20" v-for="(item, index) in dataList" :key="item.id" |
|
| 20 |
+ :class="{ 'selected-row': selectedRow == item.dataList }">
|
|
| 21 |
+ <img style="width: fit-content" src="../../resources/img/img200_13p.png" alt="" /> |
|
| 32 | 22 |
<p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
|
| 33 |
- <button |
|
| 34 |
- @click="buttonSearch2(item)" |
|
| 35 |
- type="button" |
|
| 36 |
- title="글쓰기" |
|
| 37 |
- class="new-btn" |
|
| 38 |
- > |
|
| 23 |
+ <button @click="buttonSearch2(item)" type="button" title="글쓰기" class="new-btn"> |
|
| 39 | 24 |
자세히 보기 |
| 40 | 25 |
</button> |
| 41 | 26 |
</article> |
| 42 |
- <article |
|
| 43 |
- class="table-pagination flex justify-center align-center mb20 mt30" |
|
| 44 |
- style="gap: 10px" |
|
| 45 |
- > |
|
| 27 |
+ <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px"> |
|
| 46 | 28 |
<button @click="previousPage" :disabled="page === 1">이전</button> |
| 47 | 29 |
<button class="selected-btn">{{ page }}</button>
|
| 48 | 30 |
<button @click="nextPage" :disabled="page === totalPages"> |
... | ... | @@ -56,11 +38,7 @@ |
| 56 | 38 |
<div class="flex mb10 justify-between"> |
| 57 | 39 |
<p class="popup-title">알림 자세히 보기</p> |
| 58 | 40 |
<button type="button" class="popup-close-btn" @click="closeBtn2"> |
| 59 |
- <svg-icon |
|
| 60 |
- type="mdi" |
|
| 61 |
- :path="mdiWindowClose" |
|
| 62 |
- class="close-btn" |
|
| 63 |
- ></svg-icon> |
|
| 41 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 64 | 42 |
</button> |
| 65 | 43 |
</div> |
| 66 | 44 |
<div class="board-wrap"> |
... | ... | @@ -147,6 +125,20 @@ |
| 147 | 125 |
this.searchOpen2 = false; |
| 148 | 126 |
}, |
| 149 | 127 |
|
| 128 |
+ logout() {
|
|
| 129 |
+ const result = confirm('로그아웃 하시겠습니까?')
|
|
| 130 |
+ if (result) {
|
|
| 131 |
+ |
|
| 132 |
+ } else {
|
|
| 133 |
+ return; |
|
| 134 |
+ } |
|
| 135 |
+ localStorage.removeItem('token');
|
|
| 136 |
+ this.goToPage('login');
|
|
| 137 |
+ }, |
|
| 138 |
+ goToPage(page) {
|
|
| 139 |
+ this.$router.push({ name: page });
|
|
| 140 |
+ }, |
|
| 141 |
+ |
|
| 150 | 142 |
// 공지 조회 |
| 151 | 143 |
boardList() {
|
| 152 | 144 |
const vm = this; |
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
... | ... | @@ -96,6 +96,10 @@ |
| 96 | 96 |
import ExamInsert from "./teacher/ExamInsert.vue"; |
| 97 | 97 |
import RoadMap from "./teacher/RoadMap.vue"; |
| 98 | 98 |
|
| 99 |
+import store from './AppStore'; |
|
| 100 |
+import axios from "axios"; |
|
| 101 |
+ |
|
| 102 |
+ |
|
| 99 | 103 |
const routes = [ |
| 100 | 104 |
{ path: "/login.page", name: "login", component: login },
|
| 101 | 105 |
{ path: "/Join.page", name: "Join", component: Join },
|
... | ... | @@ -419,4 +423,62 @@ |
| 419 | 423 |
routes, |
| 420 | 424 |
}); |
| 421 | 425 |
|
| 426 |
+ |
|
| 427 |
+AppRouter.beforeEach((to, from, next) => {
|
|
| 428 |
+ const publicPages = ['/login.page', '/Join.page']; |
|
| 429 |
+ const authRequired = !publicPages.includes(to.path); |
|
| 430 |
+ |
|
| 431 |
+ const isLoggedIn = store.getters.isLoggedIn; |
|
| 432 |
+ |
|
| 433 |
+ if (authRequired && !isLoggedIn) {
|
|
| 434 |
+ // 토큰이 존재하는지 확인 |
|
| 435 |
+ const token = localStorage.getItem('token');
|
|
| 436 |
+ if (token) {
|
|
| 437 |
+ // 토큰 유효성 검증 |
|
| 438 |
+ axios.post('/auth/validateToken.json', {}, {
|
|
| 439 |
+ headers: {
|
|
| 440 |
+ Authorization: token |
|
| 441 |
+ } |
|
| 442 |
+ }).then(response => {
|
|
| 443 |
+ if (response.data.status === 'success') {
|
|
| 444 |
+ const userInfo = response.data.userInfo; |
|
| 445 |
+ store.commit('setToken', token);
|
|
| 446 |
+ store.commit('setUser', userInfo.usid);
|
|
| 447 |
+ store.commit('setAuthcd', userInfo.author[0].authorCode);
|
|
| 448 |
+ const roles = userInfo.author.map(role => role.authorCode); |
|
| 449 |
+ |
|
| 450 |
+ // 학생은 Main_t로 접근할 수 없음 |
|
| 451 |
+ if (roles.includes("STUDENT")) {
|
|
| 452 |
+ next('Dashboard.page');
|
|
| 453 |
+ } |
|
| 454 |
+ // 선생님은 Main으로 접근할 수 없음 |
|
| 455 |
+ else if (roles.includes("TEACHER")) {
|
|
| 456 |
+ next('Board.page');
|
|
| 457 |
+ } else if (roles.includes("PARENT")) {
|
|
| 458 |
+ next('Main_p.page');
|
|
| 459 |
+ } else if (roles.includes("ADMIN")){
|
|
| 460 |
+ next('Dashboard.page');
|
|
| 461 |
+ } |
|
| 462 |
+ } else {
|
|
| 463 |
+ // 유효하지 않은 경우 |
|
| 464 |
+ alert("계정이 로그아웃되었습니다");
|
|
| 465 |
+ localStorage.removeItem('token');
|
|
| 466 |
+ next("login.page");
|
|
| 467 |
+ } |
|
| 468 |
+ }).catch(error => {
|
|
| 469 |
+ alert("계정이 로그아웃되었습니다");
|
|
| 470 |
+ |
|
| 471 |
+ console.error('토큰 검증 오류:', error);
|
|
| 472 |
+ localStorage.removeItem('token');
|
|
| 473 |
+ next("login.page");
|
|
| 474 |
+ }); |
|
| 475 |
+ } else {
|
|
| 476 |
+ next("login.page");
|
|
| 477 |
+ } |
|
| 478 |
+ } else {
|
|
| 479 |
+ next(); |
|
| 480 |
+ } |
|
| 481 |
+}); |
|
| 482 |
+ |
|
| 483 |
+ |
|
| 422 | 484 |
export default AppRouter; |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?