Skip to content
Snippets Groups Projects
Commit 685c8dbb authored by KimDoHyun's avatar KimDoHyun
Browse files

로그인 유지 + 로그인 시 마이페이지에 정보 표시

parent 48a22a18
No related branches found
No related tags found
No related merge requests found
...@@ -2,36 +2,52 @@ ...@@ -2,36 +2,52 @@
<div class="nav"> <div class="nav">
<div class="profile"> <div class="profile">
<img src="../assets/logo.png" alt=""> <img src="../assets/logo.png" alt="">
<p>{{uid}}</p> <div v-if="isLogin === false">
<p>{{name}}</p> <h4>Hi</h4>
<p>{{univ}}</p> </div>
<p>{{major}}</p> <div v-if="isLogin === true">
<p>{{userInfo.name}}</p>
<p>{{userInfo.univ}}</p>
<p>{{userInfo.department}}</p>
<p>{{userInfo.sid}}</p>
</div>
<hr> <hr>
</div> </div>
<div id="menu"> <div id="menu">
<router-link to='/'>Home</router-link><br> <router-link to='/'>Home</router-link><br>
<router-link to='/login'>Login</router-link><br> <router-link to='/login' v-if="isLogin === false">로그인</router-link><br>
<router-link to='/club'>Club</router-link> <router-link to='/mypage' v-if="isLogin == true">마이 페이지</router-link><br><br>
<router-link :to="{name:'club', query:{clubs:clubs}}" v-if="isLogin == true">동아리 구경</router-link><br><br>
<list v-if="isLogin == true">내 동아리</list><br><br><br><br>
<!--<div class="dropdown" v-if="isLogin == true"v-for="(club, index) in clubs" :key="index">
<button class="dropbtn">{{club.club}}</button>
<div class="dropdown-content">
<router-link :to="{name:'club_manage', query:{clubId:club.id,clubName:club.club,clubMember:club.member}}" v-if="isLogin == true">동아리 관리</router-link><br>
<router-link :to="{path: `/club_post/${club.id}`,params:{clubId:club.id,clubName:club.club}}" v-if="isLogin == true">게시판</router-link><br>
<router-link :to="{path: `/club_calendar/${club.id}`}" v-if="isLogin == true">공용 캘린더</router-link>
</div> </div>
<div id="UserInfo"> </div>-->
<h3>My Info</h3>
<div @click="$store.dispatch('logout')">
<router-link to='/' v-if="isLogin == true">로그아웃</router-link><br><br>
</div> </div>
<div id="UserClub">
<h3>Club Info</h3>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {mapState} from "vuex"
export default { export default {
name: 'Nav', name: 'Nav',
data() { data() {
return { return {
uid: 'User ID',
name: 'User Name',
univ: 'Univ',
major: 'Major'
} }
},
computed:{
...mapState(['isLogin']),
...mapState(['userInfo'])
} }
} }
</script> </script>
......
...@@ -33,6 +33,13 @@ const routes = [ ...@@ -33,6 +33,13 @@ const routes = [
name: 'signup', name: 'signup',
component: SignUp component: SignUp
}, },
{
path: "/mypage",
name: "mypage",
// beforeEnter: onlyAuthUser,
component: () =>
import(/* webpackChunkName: "about" */ "../views/Mypage.vue")
},
{ {
path: '/club', path: '/club',
name: 'club', name: 'club',
......
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import router from "../router/index"
import axios from "axios"
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
HOST_API: 'http://jnhonlinux.ddns.net:3000', userInfo:null,
nowUser: {}, isLogin: false,
// id: '', isLoginError: false
// uid: '',
// password: '',
// email: '',
// phone: '',
// univ: '',
// department: '',
// sid: '',
// ifsuper: '',
}, },
mutations: { mutations: {
setUser(state, payload){ loginSuccess(state, payload){
state.nowUser = payload; state.isLogin = true
state.isLoginError = false
state.userInfo = payload
},
loginError(state){
state.isLogin = false
state.isLoginError = true
},
logout(state){
state.isLogin = false
state.isLoginError = false
state.userInfo = null
} }
}, },
actions: { actions: {
login({commit}, loginObj){
axios
.post("http://jnhonlinux.ddns.net:3000/login",loginObj)
.then(res=>{
if(res.data.success == true){
let userInfo = res.data.result[0]
commit('loginSuccess', userInfo)
alert("로그인이 되었습니다.")
router.push('/mypage')
}
else{
alert("로그인에 실패하였습니다.")
commit('loginError')
}
})
.catch(err =>{
console.log(err)
})
}, },
modules: { logout({commit}){
commit('logout')
alert("로그아웃 되었습니다.")
router.push('/')
} }
},
modules: {}
}) })
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
<input type="password" v-model="password" placeholder="Enter The password..."> <input type="password" v-model="password" placeholder="Enter The password...">
</div> </div>
<button v-on:click="btnLogin">Login</button><br> <button @click="login({uid: uid, password: password})">Login</button><br>
{{data}} <br>
{{$store.state.nowUser}}
<router-link to='/signup'><p>If you are not yet a member ...</p></router-link> <router-link to='/signup'><p>If you are not yet a member ...</p></router-link>
</div> </div>
</template> </template>
<script> <script>
import {mapState, mapActions} from "vuex"
import axios from "axios"
export default { export default {
name: 'login', name: 'login',
data() { data() {
...@@ -24,21 +24,14 @@ export default { ...@@ -24,21 +24,14 @@ export default {
uid: '', uid: '',
password: '', password: '',
message: '', message: '',
data: [], data: []
} }
}, },
methods: { methods: {
async btnLogin() { ...mapActions(['login'])
const res = await this.$http.post('http://jnhonlinux.ddns.net:3000/login', { },
'uid': this.uid, computed: {
'password': this.password ...mapState(["isLigin","isLoginError"])
});
if(res.data.success == true) {
this.data = res.data.result[0]
this.$store.commit('setUser', data);
// this.$router.push("/")
}
}
} }
} }
</script> </script>
......
<template>
<div class="modify">
<div>
<!--placeholder로 기본값 설정해야함 / form 형식?-->
이름: <input type="text" name="name" placeholder="김도현" readonly/>
<br>
이메일: <input type="email" v-model="user.email" placeholder="kdh5998@ajou.ac.kr" required>
<br>
대학교: <input type="text" v-model="user.university" placeholder="아주대학교" required>
<br>
전공: <input type="text" v-model="user.major" placeholder="소프트웨어학과" required>
<br>
학번: <input type="text" v-model="user.student_num" placeholder="201720726">
<br>
전화번호: <input type="text" v-model="user.phone_num" placeholder="01092495992" pattern="(010)-\d{3,4}-\d{4}">
<br><br>
<!--아직 못함-->
<button @click="submit()">제출하기</button>
</div>
</div>
</template>
<script>
import { eventBus } from '../main'
import {mapState} from "vuex"
export default {
data(){
return {
email:'',
university:'',
major:'',
student_num:'',
phone_num:'',
user:{}
}
},
created(){
this.user.email = this.email
this.user.university = this.university
this.user.major = this.major
this.user.student_num = this.student_num
this.user.phone_num = this.phone_num
},
computed: {
...mapState(['userInfo'])
},
methods: {
submit(){
console.log(this.user)
// eventBus.$emit("userWasModified",new Date())
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div class="mypage">
<div>
<pre>학교: {{userInfo.univ}}</pre>
<pre>학과: {{userInfo.department}}</pre>
<pre>학번: {{userInfo.sid}}</pre>
<pre>이메일: {{userInfo.email}}</pre>
<pre>전화번호: {{userInfo.phone}}</pre>
</div>
<router-link to="/modify_profile">수정하기</router-link>
</div>
</template>
<script>
import { eventBus } from "../main"
import {mapState} from "vuex"
export default {
data() {
return {
editDate: null
}
},
computed: {
...mapState(['userInfo'])
},
// created() {
// eventBus.$on('userWasModified',(date) => {
// this.editDate = data
// })
// },
// methods: {
// parents(){
// console.log("부모 받음")
// }
// }
}
</script>
<style scoped>
.mypage pre{
font-size: 30px;
text-align: center;
}
</style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment