Vuex를 사용하여 사용자를 로그인 상태로 유지하는 방법

Vuex를 사용하여 사용자를 로그인 상태로 유지하는 방법

및 .Vuex 의입니다.

1. 사용자가 양식에 로그인 세부 정보를 제출합니다.
2. 폼은 이폼을 합니다.Vuex을 만드는 행위axios 엔드포인트에 콜 "/Express " API "/api/login
3. 됩니다.이 데이터는 에 저장되어 있습니다.state.usersetUser「」의 플래그.state.user.isLoggedIn로도 설정되어 있습니다.true.
4. JWT 액세스 토큰은 사용자의 브라우저로 전송되고 보안 쿠키에 저장되며 만료될 때까지 계속 사용할 수 있습니다.기한이 만료되면 새로 고침 토큰을 사용하여 새 JWT 액세스 토큰을 생성합니다.
5. 사이트 헤더에는 사용자의 로그인 정보가 표시됩니다.예: name

이상이 모두 예상대로 동작합니다. 고친 , " ", "는 " " 입니다.Vuex상태가 비워지고 사이트 헤더에 사용자 정보가 표시되지 않게 됩니다.이것을 극복하기 위해 나는 저장했다.state.userlocalStorage해, 「 」Vuex를 localStorage, 「」가 됩니다.localStorage클리어 됩니다.

사용자가 로그인하고 있는지 확인해야 하는 루트가 많이 있습니다.할 수 localStorage사용자가 조작할 수 있기 때문입니다.가 JWT가하면 JWT가 됩니다.localStorage는 비워지지 않고 사이트 헤더에 로그인 정보가 계속 표시됩니다. 거의 하고 있는지 API를 .localStorage뿐만 아니라.

질문입니다.

1. 페이지/뷰에 액세스 할 때마다 로그인 체크를 하는 곳은 어디입니까? Vue는 항상?app 탑재되어 있습니다.vue-router네비게이션 가드 사용?
2. beforeEachvue-router API에 /api/login용자????????????모든 경로에서 이 작업을 수행하는 것이 일반적인 관행입니까?
3. 사용자의 로그인 여부를 추적하기 위한 다른 패턴이 있습니까?

이러한 애플리케이션 결정은 주관적인 경향이 있습니다.왜냐하면 애플리케이션마다 요건과 아키텍처가 다르기 때문입니다.이게 한 페이지짜리 어플인 것 같으니까 거기서부터 할게요.

첫째, JWT가 셋업되어 기능하고 있다는 것은 매우 좋은 일입니다.그것은 힘든 일이기 때문에, 여기까지 해냈다는 것에 자부심을 가져 주세요.

응용 프로그램에 로그인하지 않고도 액세스할 수 있는 특정 페이지(로그인 페이지, 액세스 거부 페이지 등)가 있는 경우 설계에서도 고려해야 합니다.이 경우,beforeEach루트 가드는 루트가 로드되지 않도록 하거나 로그인하지 않은 사용자가 오류를 일으킬 수 있는 콘텐츠를 요구하기 전에 해당 사용자를 잡기 위한 최적의 솔루션입니다.

사용자가 새 페이지로 이동할 때마다 서버에 API를 호출할 필요가 없습니다.그건 좀 느릴 거예요.어플리케이션은 JWT를 사용하기 때문에 리프레시 토큰을 모두 사용할 수 있기 때문에 사용자가 로그인한 경우에도 브라우저를 닫고 나갈 때까지 로그인을 계속할 수 있습니다.

따라서 localStorage를 사용하면 안 됩니다.탭이 닫히거나 재부팅 후에도 사용자는 로그인한 것으로 나타납니다.를 사용하는 대신 - 편리한 MDN 링크를 사용합니다.

이제 로그인 이벤트를 통해user오브젝트는 브라우저 탭당 한 번만 발생하지만 방문 중에는 활성 상태를 유지해야 합니다.

그냥 새로 신청하지 그래요?user서버에서 오브젝트를 표시합니다.전체 페이지를 로드하기 위해 서버에 재체크를 강제하는 것은 이상하지 않습니다.이렇게 하면 사용자의 상태를 저장하기 위해 Vuex 이외의 것을 사용할 필요가 없습니다.

다음으로, 내비게이션 이벤트 중에 JWT의 유효성을 확인할 수 있는 방법이 있습니까? JWT에 할 수 수 (JWT를 등).oidc-client-js그러면 토큰의 유효기간이 만료되었는지 여부를 직접 판단할 수 있습니다.그러나 토큰이 만료된 경우 토큰 새로 고침 시스템에서 토큰을 새로 고치고 알리지 않을 수 있습니다.

또, HTTP 요구를 감시해, 401 또는 403 의 응답(단, 백엔드로 로그아웃한 유저가 처리되고 있는 경우)을 조사해, 그 중 하나가 표시되었을 경우는, 유저를 로그인 화면으로 되돌릴 수 있습니다.Axios의 글로벌 가로채기를 사용하여 잡을 수도 있고, Axios가 호출되는 위치를 중앙 집중식으로 관리할 수도 있습니다.

전반적으로, 당신은 가고 있고, 분명히 이것을 잘 이해하고 있다.지금까지 큰 진전이 있었고, 아마 90%의 무거운 물건을 이미 들어 올렸을 것이다.

언급URL : https://stackoverflow.com/questions/67986064/how-to-keep-user-logged-in-using-vuex