Commit @06fe962a568b0b477de23b88b0cc9928a178fa73

박민혁 08-08

240808 박민혁 로그인 페이지 수정

@06fe962a568b0b477de23b88b0cc9928a178fa73

8782c09

06fe962

client/views/App.vue

--- client/views/App.vue

+++ client/views/App.vue


 <template>
    <div id="app">
       <!-- <Header></Header> -->
-               <router-view />
-                  <v-app >
-                  </v-app>
+      <router-view />
+      <v-app>
+      </v-app>
    </div>
    <!-- <div >
       

 import Menu from '../views/layout/Menu.vue';
 import Side from '../views/layout/Side.vue';
 // import Footer from '../views/layout/Footer.vue';
+import store from './pages/AppStore'
 
 const App = {
    data: () => {
       return {
+         store: store,
       }
    },
    methods: {

       Header: Header,
       Menu: Menu,
       // Footer:Footer,
-      Side:Side,
+      Side: Side,
    },
    mounted: () => {
       console.log('Vue mounted');

 export default App;
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

8782c09

06fe962

client/views/Login.vue

--- client/views/Login.vue

+++ client/views/Login.vue


 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
 import axios from "axios";
+import store from './pages/AppStore';
 
 export default {
    data() {

    },
    methods: {
       submitForm() {
-         // 여기에 로그인 로직을 추가하세요.
          console.log('Username:', this.username);
          console.log('Password:', this.password);
+         
+         const vm = this;
+
          axios({
                 url: "/auth/login.json",
                 method: "post",

                   password: this.password,
                 },
             }).then(function (response) {
-               alert("성공!")
+               const token = response.headers.get('Authorization');
+               store.dispatch('login', token);
+               vm.branchPage();
             }).catch(function (error) {
                 console.log(error);
             });
 
       },
-      goToPage(page) {
-         this.$router.push({ name: page });
-      },
+      branchPage() {
+         const vm = this;
+         const token = localStorage.getItem('token');
+         axios.post('/auth/validateToken.json', {}, {
+                headers: {
+                    Authorization: token
+                }
+            }).then(response => {
+                if (response.data.status === 'success') {
+                    const userInfo = response.data.userInfo;
+                    store.commit('setToken', token);
+                    store.commit('setUser', userInfo.usid);
+                    store.commit('setAuthcd', userInfo.author[0].authorCode);
+                    const roles = userInfo.author.map(role => role.authorCode);
+
+                    // 학생은 Main_t로 접근할 수 없음
+                    if (roles.includes("STUDENT")) {
+                     vm.goToPage('Dashboard');
+                    }
+                    // 선생님은 Main으로 접근할 수 없음
+                    else if (roles.includes("TEACHER")) {
+                     vm.goToPage('Board');
+                    } 
+                } 
+            }).catch(error => {
+                console.error(error);
+            });   },
       closeModal() {
          this.showModal = false;
       },

          this.searchOpen = false;
 
       },
+      goToPage(page) {
+      this.$router.push({ name: page });
+    },
+
    },
    components: {
       SvgIcon

06fe962

client/views/pages/AppStore.js (added)

+++ client/views/pages/AppStore.js

...	...	@@ -0,0 +1,46 @@
	1	+import { createStore } from 'vuex';
	2	+
	3	+export default createStore({
	4	+ state: {
	5	+ token: null,
	6	+ userId: null,
	7	+ authcd: null,
	8	+ },
	9	+ getters: {
	10	+ isLoggedIn(state) {
	11	+ return !!state.token;
	12	+ },
	13	+ getUserInfo(state) {
	14	+ return {
	15	+ userId: state.userId,
	16	+ authcd: state.authcd,
	17	+ };
	18	+ }
	19	+ },
	20	+ mutations: {
	21	+ setToken(state, token) {
	22	+ state.token = token;
	23	+ },
	24	+ clearToken(state) {
	25	+ state.token = null;
	26	+ state.userId = null;
	27	+ state.authcd = null;
	28	+ },
	29	+ setUser(state, userId) {
	30	+ state.userId = userId;
	31	+ },
	32	+ setAuthcd(state, authcd) {
	33	+ state.authcd = authcd;
	34	+ }
	35	+ },
	36	+ actions: {
	37	+ login({ commit }, token) {
	38	+ commit('setToken', token);
	39	+ localStorage.setItem('token', token);
	40	+ },
	41	+ logout({ commit }) {
	42	+ commit('clearToken');
	43	+ localStorage.removeItem('token');
	44	+ },
	45	+ }
	46	+});

8782c09

06fe962

package-lock.json

--- package-lock.json

+++ package-lock.json


         "vue-router": "4.1.5",
         "vue-style-loader": "4.1.3",
         "vue3-sfc-loader": "^0.8.4",
+        "vuex": "^4.1.0",
         "webpack": "5.74.0",
         "webpack-cli": "4.10.0"
       }

       "integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q==",
       "license": "MIT"
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",

8782c09

06fe962

package.json

--- package.json

+++ package.json

...	...	@@ -20,6 +20,7 @@
20	20	"vue-router": "4.1.5",
21	21	"vue-style-loader": "4.1.3",
22	22	"vue3-sfc-loader": "^0.8.4",
	23	+ "vuex": "^4.1.0",
23	24	"webpack": "5.74.0",
24	25	"webpack-cli": "4.10.0"
25	26	},

Add a comment

Open 0
Closed 0

List

...	...	@@ -153,6 +153,7 @@
153	153	import SvgIcon from '@jamescoyle/vue-icon';
154	154	import { mdiMagnify, mdiWindowClose } from '@mdi/js';
155	155	import axios from "axios";
	156	+import store from './pages/AppStore';
156	157
157	158	export default {
158	159	data() {
...	...	@@ -167,9 +168,11 @@
167	168	},
168	169	methods: {
169	170	submitForm() {
170		- // 여기에 로그인 로직을 추가하세요.
171	171	console.log('Username:', this.username);
172	172	console.log('Password:', this.password);
	173	+
	174	+ const vm = this;
	175	+
173	176	axios({
174	177	url: "/auth/login.json",
175	178	method: "post",
...	...	@@ -178,15 +181,41 @@
178	181	password: this.password,
179	182	},
180	183	}).then(function (response) {
181		- alert("성공!")
	184	+ const token = response.headers.get('Authorization');
	185	+ store.dispatch('login', token);
	186	+ vm.branchPage();
182	187	}).catch(function (error) {
183	188	console.log(error);
184	189	});
185	190
186	191	},
187		- goToPage(page) {
188		- this.$router.push({ name: page });
189		- },
	192	+ branchPage() {
	193	+ const vm = this;
	194	+ const token = localStorage.getItem('token');
	195	+ 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);
	206	+
	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	+ }
	216	+ }).catch(error => {
	217	+ console.error(error);
	218	+ }); },
190	219	closeModal() {
191	220	this.showModal = false;
192	221	},
...	...	@@ -197,6 +226,10 @@
197	226	this.searchOpen = false;
198	227
199	228	},
	229	+ goToPage(page) {
	230	+ this.$router.push({ name: page });
	231	+ },
	232	+
200	233	},
201	234	components: {
202	235	SvgIcon

...	...	@@ -1,9 +1,9 @@
1	1	<template>
2	2	<div id="app">
3	3	<!-- <Header></Header> -->
4		- <router-view />
5		- <v-app >
6		- </v-app>
	4	+ <router-view />
	5	+ <v-app>
	6	+ </v-app>
7	7	</div>
8	8	<!-- <div >
9	9
...	...	@@ -27,10 +27,12 @@
27	27	import Menu from '../views/layout/Menu.vue';
28	28	import Side from '../views/layout/Side.vue';
29	29	// import Footer from '../views/layout/Footer.vue';
	30	+import store from './pages/AppStore'
30	31
31	32	const App = {
32	33	data: () => {
33	34	return {
	35	+ store: store,
34	36	}
35	37	},
36	38	methods: {
...	...	@@ -46,7 +48,7 @@
46	48	Header: Header,
47	49	Menu: Menu,
48	50	// Footer:Footer,
49		- Side:Side,
	51	+ Side: Side,
50	52	},
51	53	mounted: () => {
52	54	console.log('Vue mounted');
...	...	@@ -56,6 +58,4 @@
56	58	export default App;
57	59	</script>
58	60
59		-<style scoped>
60		-
61		-</style>
	61	+<style scoped></style>

...	...	@@ -25,6 +25,7 @@
25	25	"vue-router": "4.1.5",
26	26	"vue-style-loader": "4.1.3",
27	27	"vue3-sfc-loader": "^0.8.4",
	28	+ "vuex": "^4.1.0",
28	29	"webpack": "5.74.0",
29	30	"webpack-cli": "4.10.0"
30	31	}
...	...	@@ -3756,6 +3757,17 @@
3756	3757	"integrity": "sha512-eziaIrk/N9f9OCpyFEkR6vMsZUHcF5mQslXjffwcb5Iq6EuU74QrlpBeJqA04MvAGT7f5O8la2v9k3NtQnJb3Q==",
3757	3758	"license": "MIT"
3758	3759	},
	3760	+ "node_modules/vuex": {
	3761	+ "version": "4.1.0",
	3762	+ "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
	3763	+ "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
	3764	+ "dependencies": {
	3765	+ "@vue/devtools-api": "^6.0.0-beta.11"
	3766	+ },
	3767	+ "peerDependencies": {
	3768	+ "vue": "^3.2.0"
	3769	+ }
	3770	+ },
3759	3771	"node_modules/watchpack": {
3760	3772	"version": "2.4.1",
3761	3773	"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",

Delete comment