도메인 변경 후 로그인이 안 됨 -> 라우터 네비게이션 가드 처리 후 안 됨(해결)

도메인을 변경하니까 로그인이 되다 안되다 한다..

기존 도메인에서는 잘 되는 동작인데

도저히 원인을 모르겠어서 테스트코드를 작성해볼까 하는데 이게 맞는건가

 

원인 발견함

로그인 여부에 따라 /main 접근 권한을 달리 주었는데 소셜 로그인 시 리다이렉트 주소가 /main 뒤에 붙기 때문에(/main의 중첩 라우터로 구성해놓음) /main에 아예 접근하지 못했고 소셜 로그인 요청은 /main 에서 동작하기 때문에 소셜 로그인 요청을 보내지 못하고 있는 상태였음

 

해결

기존에 /main으로 접근하면 바로 beforeEnter로 처리했는데 

/main의 하위 /main을 만들어서 여기에서만 beforeEnter 처리해서 

소셜 로그인을 위한 /main 접근 시에는 MainComponentSocial.vue(소셜 로그인 요청 있음)로 이동,

소셜 로그인 외 /main 접근 시에는 MainComponent(소셜 로그인 요청 없음)으로 이동하도록 수정하여 해결함 

// router > index.js
{
    path: "/main",
    component: () => import("@/views/MainView.vue"),
    children: [
      // 기본 메인
      {
        path: "/main",
        component: () => import("@/components/MainComponent.vue"),
        beforeEnter: (to, from, next) => {
          if (!getAuthFromCookie("accessToken")) {
            next("/");
            console.log("로그인 안 함");
          } else {
            next();
            console.log("로그인 함");
          }
        },
      },
      // 카카오
      {
        path: "/main/kakao/redirect",
        component: () => import("@/components/MainComponentSocial.vue"),
      },
      // 구글
      {
        path: "/main/google/redirect",
        component: () => import("@/components/MainComponentSocial.vue"),
      },
    ],
  },