Axios에 세션 쿠키가 있는지 확인

Aug 20 2020

내 Vue.js 응용 프로그램에 대한 내비게이션 가드를 구현하여 사용자가 로그인했는지 확인합니다. Axios에 세션 쿠키가 있는지 여부를 묻는 것이 가장 좋은 방법이라고 생각합니다. 이 같은:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

물론 hasSessionCookie()존재하지 않는 점을 제외하고 는 문서에서 이와 같은 것을 볼 수 없습니다. 연장 할 수있는 방법이 있습니까?

예, VueX 스토어에 로그인 상태를 저장할 수 있다는 것을 알고 있습니다. 사용자가 무한한 지혜로 페이지를 새로 고쳐 응용 프로그램을 재설정하면 상태가 재설정되기 때문에 좋은 생각이라고 생각하지 않습니다. 제가 염두에두고있는 또 다른 솔루션은 앱이 로그인되어 있는지 "질문"할 수있는 백엔드 엔드 포인트입니다. 그러나 그것은 또한 매우 절망적입니다.

답변

2 TamásPolgár Aug 20 2020 at 06:45

모든 팁에 감사드립니다. 올바른 솔루션은 다음과 같습니다.

VueX는 내비게이션 가드가 확인하는 로그인 상태 (단순히 부울 플래그)를 저장합니다.
사용자가 로그인하거나 로그 아웃 할 때 플래그를 설정합니다.
앱이 시작되면 /checkloginVue 인스턴스가 생성되기 전에 서버 에서 경로를 호출 합니다. 이것은 사용자에게 유효한 세션이 있는지 여부에 따라 단순히 200 또는 401 상태 코드를 반환합니다. 그런 다음 그에 따라 VueX 플래그를 설정합니다. 이렇게하면 사용자가 브라우저를 새로 고칠 수 있지만 VueX는 로그인 여부를 계속 알 수 있습니다.
또한 401 오류를 감지하기 위해 Axios 인터셉터를 추가했습니다. 하나가 있으면 세션이 만료되었음을 의미합니다. 그런 다음 VueX 플래그를 설정하고 false사용자를 로그인 페이지로 리디렉션합니다.

나는 누군가가 관심이 있다면 세부 사항과 스 니펫과 함께 내 Medium 블로그에 기사를 썼다. https://medium.com/developer-rants/session-management-between-express-and-axios

1 Owl Aug 20 2020 at 03:54

서버 측 쿠키이기 때문에 클라이언트 측 자바 스크립트에서는 확인할 수 없으므로 Express 서버에 HTTP 요청을하여 세션이 있는지 확인해야합니다. 다음과 같이 익스프레스 서버에서 간단한 경로를 만듭니다.

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

그런 다음 vue 내비게이션 가드를 확인하십시오.

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Akbarkhan Aug 20 2020 at 03:16

당신은 올바른 방향으로 가고 있지만 axios는 HTTP 클라이언트이며 쿠키와 관련이 없으며 쿠키 또는 저장에 관심이 없습니다. 따라서 쿠키 를 설정하고 얻으려면 vue-cookies 와 같은 패키지를 사용해야 합니다.

generic3892372 Nov 01 2020 at 21:47

Tamás Polgár, 당신은 내가 Vue와 똑같은 도전을 기록했습니다. 예기치 않은 브라우저 이벤트가 발생하고 상점이 손실 된 경우 로그인으로 수행 할 작업.

Vue 스토어 :

Vue 저장소는 SPA가 이러한 플래그 (로그인 여부)를 저장할 수있는 편리한 위치를 의미하지만 저장소는 완전히 지워지고 각 Vue 인스턴스로 다시 설정됩니다. 즉, 새 브라우저 창 / 탭을 의미합니다. 새로 고침 또는 브라우저 새로 고침을 트리거하는 기타 예기치 않은 이벤트.

따라서 귀하의 접근 방식은 합법적이고 작업 가능한 솔루션 IMO 인 상태를 신속하게 확인하기위한 추가 백엔드 호출을 설명합니다.

또한 두 가지 잠재적 솔루션이 더 있으며, 그 중 두 번째는 자체 SPA에서 구현했습니다.

두 가지 다른 솔루션

1) 백엔드 코드를 전혀 건드리지 마십시오. 로그인이 설정되면 vue-cookies 를 사용 하여 클라이언트 브라우저가 쿠키 를 설정하도록합니다 (백엔드 API 서버에 필요한 http 전용 쿠키와 완전히 별 개임).

이 쿠키 는 브라우저를 새로 고친 후에도 여전히 존재 해야합니다 . 그러나 로그인 상태를 확인할 때마다 로컬 쿠키를 확인하기 위해 프런트 엔드를 변경하고 싶지 않았기 때문에이 방법을 사용 (또는 시도)하지 않았습니다.

프런트 엔드 코드는이 쿠키를 사용하여 사용자가 여전히 로그인되어 있는지 여부를 파악할 수 있습니다.

2) 또 다른 별도의 접근 방식은 특정 경로의 컨트롤러에 대해서만 인증을 위해 일반 백엔드 API 검사를 단락시키고 다른 경로에 대해서는 연결하지 않는 것입니다.

백엔드의 '단락'이 작동하는 방식은 다음과 같습니다.

특정 경로의 컨트롤러 메서드의 경우 먼저 요청에 사용자가 있는지 확인한 다음 200 을 반환하지만 상태가 "false"이거나 성공 응답에도 나타나는 다른 변수 를 반환합니다.

반 직관적이지만, 이는 프론트 엔드 Axios가 표준 오류 응답 이외의 다른 것을 잡을 수있는 무언가를 제공합니다.

참고 : 백엔드 API 경로의 컨트롤러 메서드에 많은 코드가있는 경우이 검사를 가장 먼저 수행하면 비용이 많이 드는 호출 부분을 피할 수 있기 때문에 이것을 "단락 회로"라고 부릅니다.