1. UserStore 수정
기능이 뒤죽박죽 섞여있었던 userStore를 수정하였다
action에서 일어나는 일들을 mutations로 보내서 state를 수정한다.
action에는 login 메소드와 getUserInfo 메소드가 있다.
login action
// Login.Vue의 로그인 버튼을 누르면 실행되는 메소드 일부
try {
this.$axios.post("/authenticate", JSON.stringify(saveData), {
headers: {
"Content-Type": `application/json`,
},
})
.then((response) => {
this.$store.dispatch('login', response.data); //dispatch
this.$router.push({path: './home'});
}
})
1. 로그인을 성공하면 받는 토큰을 dispatch를 사용하여 Store login action으로 보낸다
//userStore actions 의 login
actions: {
login({commit,dispatch}, payload){
let data = {};
data.email = JSON.parse(atob(payload.token.split('.')[1])).jti; //2
data.token = payload.token
commit('login', data) //3
dispatch('getUserInfo', data.email) //4
},
2. jwt토큰을 해석하여 토큰안에 들어있는 email을 가져와서 data에 이메일과 토큰을 저장한다
3. 저장한 data를 login mutations 로 보내서 state에 저장
4. email을 action의 getUserInfo 로 보낸다
getUserInfo action
토큰에 개인정보를 다 담으면 토큰이 길어지고 여러가지 취약점이 생긴다
따라서 Login에서 받은 email을 사용하여 유저의 개인정보를 가져온다
getUserInfo 는 login action 에서 받은 email을 사용하여 이름, 닉네임 등 정보를 가져온다
getUserInfo({commit}, context){
console.log("getUserInfo : " + context)
let data={};
data.email = context
axios.post('/user/info', JSON.stringify({"email":data.email}), {
headers: {
"Content-Type": `application/json`,
},
})
.then((res) => {
data.nickName = res.data.nickName
data.firstName = res.data.firstName
data.lastName = res.data.lastName
commit('putUserInfo', data)
})
.catch((error)=>{
console.log(error.res)
})
}
springboot의 /user/info 로 요청하여 받은 정보를 data에 저장 후 putUserInfo 로 각 데이터를 저장한다.
그리고 mutations로 저장한 data를 보내서 state에 저장한다.
2. 마이페이지 구현
각 페이지의 초록색 네비게이션 MypageNavi를 import하여 페이지를 구성하였다.
마이페이지 - 메인 /Mypage
마이페이지 - 개인정보 /Mypage/PersonalInfo
마이페이지 - 개인정보 수정 /Mypage/name & nickname & email
userStore에 저장되어 있는 정보를 불러와서 mypage를 구성하였다.
1.userStore 의 방법으로 개인정보를 userStore에 저장 후, 저장한 정보를 불러오는 방법으로 Springboot와 통신없이 마이페이지를 구현하였는데 그냥 Springboot와 통신하여 마이페이지를 구현하는 방법이 더 나은 것 같다..
또 개인정보를 수정하면 UserStore의 개인정보도 같이 수정해주는 코드를 작성하여야 한다.
'Vue > Vue' 카테고리의 다른 글
글 수정 1 (springboot - vue) (0) | 2022.01.14 |
---|---|
글 작성 (Springboot + Vue) (0) | 2022.01.13 |
(signUp-3) 회원가입 마무리 (0) | 2021.12.25 |
(signup-2) 중복확인 (0) | 2021.12.24 |
doFilter 특정 URL 제외시키기 (0) | 2021.12.23 |