리액트 로그인 유지 구현(스프링 부트 api 호출 방식)

리액트로 웹 구현시 새로고침할때마다 로그인 유지가 되지 않기 때문에

유저가 로그인한 '상태'를 별도로 저장해서 웹 이동시에나 새로고침할 때마다 상태를 유지 시켜줘야한다.

구글링하면 로컬스토리지에 저장해주는 방법도 나오는데 이 방법은 백 서버가 다운되어도 유지되는 프론트 환경에서만의 방법이기 때문에 완전한 방법은 아닌것같다.

해당 페이지들이 마운트 될때마다 useEffect 훅함수를 사용하여 저장된 세션을 불러오는 api를 호출하고

만약 세션이 있으면 login 상태를 true로 리덕스 스토어에 저장해주는 방식으로 진행했다.

 

- Home.js

useEffect(() => {
    axios
      .get('/api/users/me')
      .then((res) => {
        let role = res.data.result.role;
        let id = res.data.result.id;
        let userId = res.data.result.userId;
        dispatch(loggedIn([id, role, userId]));
      })
      .catch(() => {
        nav('/login');
      });
    
  }, []);

 

 

'/api/uses/me' 라는 주소는 백 서버에 들어가 있는 세션이 있는지 확인해주는데, 만약 세션이 없다면 로그인 화면으로 돌아가고 있다.

 

- users api 백엔드 로그인 구현

@RequiredArgsConstructor
@RestController
@RequestMapping("/users")
@Slf4j
public class UserRestController {

    private final UserService userService;


    // 로그인 세션 확인
    @GetMapping(path = "me")
    public ApiResult<UserApiResponse> me(HttpSession session){

        UserApiResponse user = (UserApiResponse) session.getAttribute("user");
        if(ObjectUtils.isEmpty(user)){
            throw new UnauthenticatedException();
        }
        return response(user)
        
    }

    // 로그인
    @PostMapping("/login")
    public ApiResult<UserApiResponse> loginUser(HttpSession session, @RequestBody LoginUserForm loginInfo) {

        UserApiResponse user = userService.login(loginInfo);
        session.setAttribute("user", user);
        return response(user);
        
    }

    //로그아웃
    @GetMapping("/logout")
    public ApiResult<Integer> logoutUser(HttpSession session){
        session.removeAttribute("user");
        return response(1);
    }

}

 

 

 

- redux slice 

import { createSlice } from '@reduxjs/toolkit';


const initialState = { isLoggedIn: false, role: '', userId: 0, username: '' };


const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    logout: (state) => {
      console.log('logout slice');
      state.isLoggedIn = false;
      state.role = null;
      state.userId = 0;
      state.username = '';
    },
    loggedIn: (state, action) => {
      state.isLoggedIn = true;
      state.role = action.payload[1];
      state.userId = action.payload[0];
      state.username = action.payload[2];
    },
  },
});

export const { logout, loggedIn } = authSlice.actions;
const { reducer } = authSlice;
export default reducer;

 

loggedIn slice 구현 부분에 role이라고 하는 관리자인지 사용자인지 정보를 같이 저장해주고 있다.

리덕스 툴킷을 사용하고 있고 localhost 환경에서 진행했다.

로그인 부분은 사람마다 다 다르게 다양한 방법으로 구현할 수 있는 것 같다.

 

- jwt 토큰으로 진행한 리액트 로그인 구현 참고할 것 https://backend-intro.vlpt.us/6/06.html