File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div v-if="isAdminPage" class="admin-wrap">
<div :class="layoutClass">
<AdminHeader v-show="isLogin" :mngrId="mngrInfo" @updateIsLogin="isLogin = $event"></AdminHeader>
<AdminMenu v-show="isLogin"></AdminMenu>
<div :class="{ 'login-wrap': !isLogin, 'main-wrap': isLogin }">
<router-view @updateIsLogin="isLogin = $event" />
</div>
</div>
</div>
<div v-else class="user-wrap">
<Header></Header>
<Menu></Menu>
<div class="main-warp">
<router-view />
</div>
<Footer></Footer>
</div>
<div v-if="isModalOpen" class="modal-wrapper">
<div class="modal-container admin-alert">
<p class="modal-text">
해당글은 정회원에게 공개된 게시물 입니다.<br />
(준회원은 가입 승인 이후 열람 가능하며,<br />
비회원은 회원가입이 필요합니다.)
</p>
<div class="modal-end">
<button class="dark-gray-btn" @click="closeModal()" style="width:100%">닫기</button>
<button class="blue-btn" v-if="userInfo.user_id == null" @click="loginMove" style="width:100%">로그인</button>
</div>
</div>
</div>
<LoadingSpinner />
</template>
<script>
import { useStore } from "vuex";
import axios from "axios";
import Header from '../layout/Header.vue';
import Menu from '../layout/Menu.vue';
import Footer from '../layout/Footer.vue';
import AdminHeader from '../layout/AdminHeader.vue';
import AdminMenu from '../layout/AdminMenu.vue';
import LoadingSpinner from "../component/loading/LoadingSpinner.vue";
import { debounce } from 'lodash'
const App = {
data() {
return {
title: null,
isLogin: false,
loggedInUserId: null,
userInfo: {
user_id: null,
},
mngrInfo: {
mngr_id: null,
},
store: useStore(),
screenType: 'large',
// 모달창 오픈 상태
isModalOpen: false,
};
},
created() {
// 디바운스된 이벤트 핸들러 생성
this.debouncedHandleResize = debounce(this.handleResize, 200); // 200ms 디바운스
},
methods: {
openModal: function () {
this.isModalOpen = true;
},
closeModal: function () {
this.isModalOpen = false;
this.modalType = null;
},
// 로그인
updateIsLogin: function (boolean) {
this.isLogin = boolean;
},
//로그인 사용자 조회
loginUserSelectOne: function (callback) {
let vm = this;
axios({
url: "/user/loginUserSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
}).then(function (response) {
if (response.data.loginUser != null && response.data.loginUser['user_id'] != null) {
vm.store.commit("setLoginUser", response.data.loginUser);
vm.isLogin = true;
vm.userInfo.user_id = response.data.loginUser['user_id'];
} else {
vm.store.commit("setLoginUser", null);
}
if (response.data.key != null && response.data.key['salt'] != null) {
vm.store.commit("setKey", response.data.key);
} else {
vm.store.commit("setKey", null);
}
callback(response.data);
}).catch(function (error) {
alert("사용자 조회 실패, 다시 시도해주세요.")
});
},
//로그인 사용자 조회
loginAdminSelectOne: function (callback) {
let vm = this;
axios({
url: "/loginManagerSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
}).then(function (response) {
if (response.data.loginUser != null && response.data.loginUser['mngr_id'] != null) {
vm.store.commit("setLoginUser", response.data.loginUser);
vm.isLogin = true;
vm.mngrInfo.mngr_id = response.data.loginUser['mngr_id'];
} else {
vm.store.commit("setLoginUser", null);
}
if (response.data.key != null && response.data.key['salt'] != null) {
vm.store.commit("setKey", response.data.key);
} else {
vm.store.commit("setKey", null);
}
callback(response.data);
}).catch(function (error) {
alert("사용자 조회 실패, 다시 시도해주세요.")
});
},
// 반응형을 위한 핸들러
handleResize: function () {
const screenWidth = window.innerWidth;
if (screenWidth < 821) {
this.screenType = 'small';
} else if (screenWidth <= 1366) {
this.screenType = 'medium';
} else {
this.screenType = 'large';
}
},
loginMove: function () {
this.$router.push('/Login.page');
this.isModalOpen = false
}
},
watch: {
},
computed: {
isAdminPage() {
// 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
return this.$route.path.startsWith('/adm');
},
layoutClass() {
return {
'layout-wrap-small': this.screenType === 'small',
'layout-wrap-medium': this.screenType === 'medium',
'layout-wrap-large': this.screenType === 'large',
};
},
},
components: {
'Header': Header,
'AdminHeader': AdminHeader,
'Menu': Menu,
'AdminMenu': AdminMenu,
'Footer': Footer,
'LoadingSpinner': LoadingSpinner
},
mounted() {
//vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
this.$router.beforeEach((to, from, next) => {
const currentPath = to.path;
if (currentPath.startsWith('/adm')) {
//관리자
this.loginAdminSelectOne(function (store) {
//로그인 유무(로그인 정보가 있으면 True, 없으면 False)
let isLogin = (store.loginUser != null && store.loginUser['mngr_id'] != null);
//로그인 상태 일 때
if (isLogin == true) {
//로그인 페이지 이동은 못하게 함
if (to.path == '/adm/login.page') {
next(false);
} else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
next();
}
} else {//로그인 상태가 아닐 때
//로그인 다른 페이지로 이동하려고 할 때, 이동 못하게 함
if (from.path == '/adm/login.page') {
next(false);
} else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
//로그인 페이지로 이동은 무조건 가능
if (to.path == "/adm/login.page") {
next();
} else {//로그인 페이지로 무조건 이동
next("/adm/login.page");
}
}
}
});
} else {
//로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
this.loginUserSelectOne((store) => {
//로그인 유무(로그인 정보가 있으면 True, 없으면 False)
let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);
const authenticationState = store.loginUser;
const { authorization } = to.meta;
const nonMember = authenticationState == null ? '비회원' : '회원'
//로그인 상태 일 때
if (isLogin == true) {
const memberType = authenticationState.create_account_approval === 'Y' ? '정회원' : '준회원';
const memberTypeDetail = memberType === '정회원' ? (authenticationState.user_auth === 'common' ? '일반 정회원' : '기업 정회원') : '준회원';
//로그인 페이지 이동은 못하게 함
if (to.path == '/Login.page') {
next(false);
} else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
if (!authorization.includes(memberTypeDetail)) {
// 권한이 없는 유저는 모달창 띄우고 그 페이지에 그대로
this.isModalOpen = true;
next(false);
}
next();
}
} else {//로그인 상태가 아닐 때
// 로그인 상태가 아니면 권한이 없는게 있어 넣어줘야함
if (!authorization.includes(nonMember)) {
this.isModalOpen = true;
next(false);
}
next();
}
});
}
});
window.addEventListener('resize', this.debouncedHandleResize);
this.handleResize();
},
beforeDestroy() {
window.removeEventListener('resize', this.debouncedHandleResize);
},
}
export default App;
</script>
<style scoped>
.admin-wrap {
width: 100%;
height: 100%;
}
.layout-wrap-large {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 270px minmax(1234px, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"nav header "
"nav main "
"nav main "
}
.layout-wrap .main-warp {
padding: 30px;
grid-area: main;
background: #f8f8f8;
}
.user-wrap .main-warp {
min-height: 70rem;
}
.login-wrap {
grid-column: 1/3;
grid-row: 1/3;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>