로그인 상태를 확인하고 로그인하지 않은 경우 오버레이를 렌더링하고 로그인에 성공하면 계속합니다.

로그인 상태를 확인하고 로그인하지 않은 경우 오버레이를 렌더링하고 로그인에 성공하면 계속합니다.

Vuetify와 Vuex에서 Vuejs를 사용하고 있는데 간단한 앱을 만들고 싶습니다.아주 작은 ToDo 앱을 하나 해봅시다.백엔드는 Express REST API를 사용하고 HTTP 메서드는 Axios를 사용합니다.

세션을 처리하기 위해 다음 두 가지를 읽습니다.

Axios 호출을 시작할 때 상태 코드에 오류가 발생할 수 있습니다.401내가 처리할 수 있는 방법은axios.interceptors.response.

  instance.interceptors.response.use(res => res, (err) => {
    if (err.response.status === 401) {
      store.dispatch('authentication/destroySession');
    }

    return err;
  });

다른 루트로 리다이렉트 할 때beforeRouteEnter의 이벤트Vue Router토큰이 유효하고 유효기간이 지나지 않았는지 확인합니다.

router.beforeEach((to, from, next) => {
  const userIsLoggedIn = checkIfUserIsLoggedIn();

  if (!userIsLoggedIn) {
    next(false); // stay on this route
  } else {
    next(); // navigate to the next route
  }
});

아직까지는 좋아.그러나 이러한 접근 방식 중 하나가 "로그인되지 않은" 상태에 대처해야 하는 경우 어떻게 됩니까?사용자를 로그인 페이지로 리디렉션하면 현재 작업이 손실되기 때문에 리디렉션하고 싶지 않습니다.그리고 아마 계정이 없어서 먼저 가입해야 할 거야

루트 또는 REST 엔드포인트가 보호되어 있는 경우 수행할 작업을 취소하고 오류 경고를 표시한 후 오버레이를 렌더링합니다.

대부분의 리소스는 로그인하지 않은 경우 로그인 페이지로 리다이렉트하는 방법을 설명하지만 예를 들어 Github은 로그인 페이지를 렌더링하고 로그인 후 작업을 수행합니다.

이 오버레이를 렌더링하려면 어떻게 해야 합니까?그게 가능하기나 해?더 나은 방법이 있을까요?

1. 오버레이 HTML을 만듭니다(에 포함 가능).App.vue말씀하신 대로) 가시성은 계산 결과에 따라 달라집니다.showOverlay:

   <div v-show="showOverlay">OVERLAY CONTENT</div>
   

2. Vuex 스토어에서 오버레이의 가시성을 나타내는 상태를 유지합니다.

   state.showOverlay = false;
   

3. 되돌아가다App.vue, 이 Vuex 상태를 에 매핑합니다.showOverlay계산:

   import { mapState } from 'vuex';
   export default {
     computed: {
       ...mapState(['showOverlay'])
     }
   }
   

4. 사용처beforeRouteEnter또는 라우터의 경우beforeEachVuex 스토어를 직접 Import합니다(이것에 의해, 다음의 경우에 스토어에 간단하게 액세스 할 수 있습니다).this.$store액세스 할 수 없습니다.

   import store from '@/store.js';
   

5. 당신이 코드 예시를 올렸군요.beforeEach대신beforeRouteEnter다음과 같은 것을 사용합니다.

   router.beforeEach((to, from, next) => {
     const userIsLoggedIn = checkIfUserIsLoggedIn();
   
     if (!userIsLoggedIn) {
       store.state.showOverlay = true;
       next(false); // stay on this route
     } else {
       next(); // navigate to the next route
     }
   });
   

이 작업을 수행한 후에는 불필요한 편집을 방지하기 위해 오버레이를 컴포넌트로 이동하는 것이 좋습니다.App.vue오버레이의 상태를 다음과 같이 설정해야 합니다.false아슬아슬쩍

언급URL : https://stackoverflow.com/questions/55553115/check-login-state-render-an-overlay-if-not-logged-in-and-continue-if-login-succ