[우또] 프로젝트 개선 / 비로그인 손님 받기

 

안녕하세요!

작년 인턴때 진행했던 프로젝트 문제점들을 하나하나 확인하며 개선 중에 있어요.

가장 큰 문제라고 느꼈던건, 무조건 로그인을 해야지만 서비스를 볼 수 있다는 점.

저는.. 이런 서비스를 별로 좋아하지 않아효

 

폐쇄적인 서비스도 아니고 유저 유입이 중요한 서비스에서 무조건 로그인을 해야지만 컨텐츠를 볼 수 있다?

건방진 대형서비스에서 (ex... 인스타그램...) 쓸 법한.. 방식이죠.

전 인스타그램도 불편하다 생각해요. 가끔 pc에서 인스타그램 게시글을 클릭했을 때 로그인하라 뜨면 창 바로 닫습니다 ㅠ

왜냐? 비밀번호를 까먹었거덩요 ㅎ 로그인을 못함 

 

https://github.com/Soonrang/GodLife

GitHub - Soonrang/GodLife: 갓생챌린지로 인증하고 리워드를 획득하세요!

 

 

 

지금 배포되어있는 주소로 가면 이렇게 창이 뜹니다.

만약 여기서 강제로 url을 바꿔 이동하게되면?

찾을 수 없는 페이지라는 문구가 나오게 돼요.

자 이제 차근차근 수정해봐요🙀

 

 

 

공부 시작하기 전에 방을 치우듯

로그인 페이지 이미지를 바꿔요.

프론트 팀원분께서 상의없이 서비스명을 변경하셨어서

프로젝트가 끝난 지금, 제가 생각했던 이름으로 변경했어요.

 

 

이름은 무려,

[Wotto / 우또]

💬 

하 멋있어...

프로젝트 대.공.사가 필요하겠죠? 어쩌겠어 해야지 👍

지금 가장 문제가 되는 지점은 챌린지와 상점에서 토큰검사를 한다는거예요.

프론트에서 로그인하지않으면 그 어떤 페이지도 못들어가요.

 

 개선방법                                                                                                                                

1. App.tsx에서 ProtectedRoute 범위 수정하기

<Route element={<ProtectedRoute />}>

원래는 ProtectedRoute가 모든 페이지에 적용되어있었어요. 

정말 필요한 페이지에만 위 설정을 적용해줘요.

 

2. 백엔드는 guest용 api를 생성 

   - restapi 엔드포인트 분리

   - /api/challenge → 로그인한 사용자 전용 (토큰 필요)

   - /guest/challenge → 로그인 없이 접근 가능 (토큰 없음)

 

3. 프론트에서 guest와 user 처리를 다르게 받아옴

    [기존방식]

  - api 엔드포인트는 access Token/ refresh Token 체크가 이뤄짐

  - 문제가 있는 경우 logout 처리

 

    [개선방식]

  - guest api를 만들어 토큰체크를 하지 않도록 함

---

 오류                                                                                                                                           

 

위 방식으로 개선했으나 tokenCheckFilter에서 오류가 발생했어요.

url 접근을 허용해줘야하는데 수정을 하지 않았기 때문!

tokenCheckFilter

 

guest로 시작하는 url은 토큰체크필터가 작동하지 않게 설정해줘요!

그리고 추가적으로 

//CustomSecurityConfig

http.authorizeHttpRequests(authorize -> authorize
                .requestMatchers("/js/**", "/css/**", "/images/**",
                        "/api/**", "/event/**", "/user/**","/shop/**",
                        "/v3/api-docs/**","/swagger-ui/**","/points/**","/api/challenge/**","/guest/**").permitAll()
                .requestMatchers("/api/admin/**").hasRole("ADMIN")

                .anyRequest().authenticated()
        );

 

 

CustomSecurityConfig에 /guest/**를 추가해주면 돼요!

 

 

 

 

그러면 이렇게 로그인을 하지 않은 상태에서도 챌린지 목록을 볼 수 있어요. 

 

 

 

---

이제 필요한 다음단계는 다음과 같아요.

1. 유저가 본격적으로 서비스를 이용하려할 때는 강제로 로그인창 리다이렉트

(ex. 챌린지 신청..등)

 

지금은 해당처리가 안되어있어서 위 사진처럼 계속 돌게돼요.

컴퓨터 고장나는줄 

 

 

하 험난하다

컴퓨터는 고장나면 안돼요

얼마주고 산건데 ... 

 

 

2. 무한루프 방지

const logout = () => {
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    window.location.href = '/login';
};

export const postRefreshToken = async () => {
    const refreshToken = localStorage.getItem('refreshToken');
    const accessToken = localStorage.getItem('accessToken');

    //무한루프 방지용
    if (!refreshToken || !accessToken) {
        logout();
        return null;
    }

 

 

우선 위 코드를 통해서 토큰이 없다면 로그아웃을 시켜줘요.

당연하지.. 다 지워버려... 다..< but 검색을 통해 이 방법이 올바른지 점검해야겠죠?

 

 

오늘은 여기까지 수정하고 내일은 로그인 부분, 메인페이지 디자인을 바꿔서 업데이트 해볼게요.