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>
<Header></Header>
<Menu></Menu>
<div class="main-warp">
<router-view />
</div>
<!-- <Footer></Footer> -->
</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";
const App = {
data: function () {
return {
title: null,
isLogin: false,
userInfo: {
user_id: null,
},
store: useStore(),
};
},
methods: {
//로그인 사용자 조회
loginUserSelectOne: function (callback) {
let vm = this;
axios({
url: "/user/loginUserSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
}).then(function (response) {
// console.log("getIsLogin - response : ", 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);
// console.log("vm.store",vm.store);
// console.log("response.data.key['salt']",response.data.key['salt']);
} else {
vm.store.commit("setKey", null);
}
callback(response.data);
}).catch(function (error) {
console.log("getIsLogin - error : ", error);
});
}
},
watch: {},
computed: {},
components: {
Header: Header,
Menu: Menu,
Footer: Footer,
},
mounted: function () {
//vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
this.$router.beforeEach((to, from, next) => {
const vm=this;
//console.log("to : ", to, ", from : ", from);
//로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
this.loginUserSelectOne(function (store) {
//로그인 유무(로그인 정보가 있으면 True, 없으면 False)
let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);
const authenticationState = store.loginUser;
//authorization에서는 라우터에서 메타 속성을 정의해준 값이 담겨진다.
// undefined, [], ["admin"], ["client"]가 올 수 있다.
const { authorization } = to.meta;
//로그인 상태 일 때
if (isLogin == true) {
//로그인 페이지 이동은 못하게 함
if (to.path == '/Login.page') {
next(false);
} else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
if (!authorization.includes(authenticationState?.user_author)) {
// 권한이 없는 유저는 not-found 페이지로 보낸다.
next({ path:"/"});
}
next();
}
} else {//로그인 상태가 아닐 때
//로그인 페이지에서 다른 페이지로 이동하려고 할 때, 이동 못하게 함
if (from.path == '/Login.page') {
next(false);
} else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
//로그인 페이지로 이동은 무조건 가능
if (to.path == "/Login.page") {
next();
} else {//로그인 페이지로 무조건 이동
next("/Login.page");
}
}
}
});
});
},
};
export default App;
</script>
<style scoped>
.main-warp{position: relative; height: calc(100% - 70px); }
[v-cloak] {
display: none;
}
</style>