로그인 변경점과 문제점 해결

변경 사항

기존의 로그인 방식은 아래와 같았다.

(vue)login > (Spring)spring에서 로그인 처리 후 token 반환 > (vue)store로 데이터 전송

> store에서 받은 정보로 (Spring)유저 정보 조회 > 받은 정보 state에 commit

 

그래서 위 사진과 같이 총 쿼리가 4번이나 발생한다

 

로그인시 유저 조회,

토큰 검증시 조회 (유저정보 조회)

다시 유저 전체데이터 조회 (유저정보 조회)

반환할 유저 정보 조회  (유저정보 조회)

 

거기다 action의 비동기 로직처리 때문에 setTime으로 딜레이를 준 것 까지 합해 꽤 많은(?) 시간을 기다려야했다.

 

 

그래서? 로그인시 필요한 데이터를 전부 뽑아서 반환해주기로 했다.

Jwt인증컨트롤러에서 기존에 검사할때 조회한 member데이터에서 데이터를 뽑아서 반환하니

아래와 같이 한 번의 쿼리로 정보를 반환하였다.

거기다 userInfo action의 setTimeOut까지 사라졌으니 더 부드럽게(?) 로그인 처리가 된다.

 

 

 

---

 

 

로그인 문제점

기존에는 로그인 상태로 login페이지에 이동이 가능했다

만약 login페이지에서 로그아웃을 처리시 > 로그아웃을 수행하고 login 페이지로 이동하는데 

이미 여기는 로그인 페이지다..

 

해결

1. route.path의 정보를 불러와 현재 페이지가 로그인 페이지라면 페이지 이동 하지않음

2. (본질적 문제 해결) router의 네비게이션 가드에서 로그인 상태일시 로그인 페이지에 이동하지 못하게 설정

router.beforeEach((to, from, next) => {
...
    if (to.matched.some(record => record.meta.logout)) {
        if (store.state.member.loginData.loginState===false) {
            next();
        } else {
            alert("이미 로그인 상태입니다.")
            router.push({path:'/'})
        }
    }else{
        next();
    }
})