Store 수정 & 마이페이지 구현 (12.31~1.04)

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의 개인정보도 같이 수정해주는 코드를 작성하여야 한다.