비동기 인증 상태 요청에 대한 Vuejs 경로 탐색 가드

비동기 인증 상태 요청에 대한 Vuejs 경로 탐색 가드

나는 내 vuejs 앱에서 인증을 하기 위해 소방서를 사용하고 있다.내 루트(main.js) vue 구성 요소.

  created() {
    auth.onAuthStateChanged((user) => {
      this.$store.commit('user/SET_USER', user);
      if (user && user.emailVerified) {
        this.$store.dispatch('user/UPDATE_VERIFIED', {
          userId: user.uid,
        });
        // SUCCESSFUL LOGIN
        this.$router.replace('dashboard');
      } else if (user && !user.emailVerified) {
        this.$router.replace('verify');
      }
    });

따라서 기본적으로, 라우터 네비게이션 가드는 인증 상태를 확인하고 각 경로에 앞서 라우팅을 하고 있다.

router.beforeEach((to, from, next) => {
  const currentUser = firebaseApp.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const allowUnverified = to.matched.some(record => record.meta.allowUnverified);

  if (requiresAuth && !currentUser) {
    next('login');
  } else if (currentUser
              && !currentUser.emailVerified
              && !allowUnverified
              && to.path !== '/verify') {
    next('verify');
  } else if (!requiresAuth && currentUser) {
    next('dashboard');
  } else {
    next();
  }
});

페이지를 새로 고치면(유효한 인증 토큰으로) 경로 가드의 지점 1을 누르고 stateChanges를 누르면 /dashboard로 리디렉션되도록 처리기가 호출된다.로그인하는 동안 항상 현재 경로 대신 대시보드 경로로 이동하십시오.

내가 이 사건을 어떻게 처리할 수 있을까?a before를 각 인증 구성 요소에 추가하면 Data Fetching Vue Docs에서 나쁜 냄새가 난다.

루트 인스턴스에 생성된 후크 대신 저장소에 있어야 하는가?어떤 도움이라도 대단히 고맙게 생각한다.이런 패턴이 나를 괴롭히고 있다.

퀵 픽스

사용자가 존재하고 인증을 요구하지 않는 경우, 왜 다른 페이지(대시보드)로 리디렉션하는가?

  } else if (!requiresAuth && currentUser) {
    next('dashboard');
  } else {
    next();
  }

그냥 라우팅이 계속되도록 놔두면 돼.

  if (requiresAuth && !currentUser) {
    next('login');
  } else if (requiresAuth && !currentUser.emailVerified && !allowUnverified) {
    next('verify');
  } else {
    next();
  }

당신은 또한 제거해야 한다.this.$router.replace('dashboard');처음부터onAuthStateChanged콜백자세한 답변은 아래를 참조하십시오.

깊이

나는 Vue 구성 요소에 인증과 라우팅 로직을 넣는 것을 피하겠다.언젠가는 말이 되겠지만, 이 경우에는 완전히 피할 수 있다.

나는 Vue에 국한되지 않고 다른 곳에서 사용할 수 있도록 Vuex 스토어 인스턴스를 격리된 모듈에 넣는 것을 좋아한다.

import Vue from 'vue';
import Vuex from 'vuex';
// Configuration is generated with a function, so testing the store is easier
import getConfig from './config';

Vue.use(Vuex);

export default new Vuex.Store(getConfig());

따라서 인증 논리는auth.js서비스

import store from './store';
import router from './router';

// other auth related code, you can even export a common API
// to use within your app.
// like this simple wrapper, which hides the fact that you're using firebase
export function getUser() {
  return firebaseApp.auth().currentUser;
}
export default { getUser }

auth.onAuthStateChanged((user) => {
  // store/business logic should be inside the store.
  store.dispatch('user/AUTH_STATE_CHANGED', user);
  // minimal handling of mandatory steps in the login or sign up process
  if (!user) {
     router.push('login');
  } else if (user && !user.emailVerified) {
    router.push('verify');
  }
});

사용자가 올바르게 로그인하면 여기서 리디렉션할 이유가 없다.글로벌 내비게이션 가드가 대부분의 리디렉션 작업을 수행하므로 또는 를 사용하여 현재 경로로 리디렉션하면 된다.

실제로 이 내비게이션 가드는 실내에서 등록이 가능하다.auth.js상술한 서비스

router.beforeEach((to, from, next) => {
  const currentUser = getUser();
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const allowUnverified = to.matched.some(record => record.meta.allowUnverified);

  if (requiresAuth && !currentUser) {
    next('login');
  } else if (requiresAuth && !currentUser.emailVerified && !allowUnverified) {
    next('verify');
  } else {
    next();
  }
});

그런 다음 로그인한 후에는 연결할 수 없는 경로에 간단한 내비게이션 가드를 추가하십시오.

path: '/login',
beforeEnter: (to, from, next) => {
    if (auth.getUser()) {
        next('dashboard');
    } else {
        next();
    }
},

요점은 제한된 페이지로 이동할 때만 리디렉션을 수행한다는 것이다.

로그인한 사용자가 페이지를 새로 고칠 때 리디렉션할 이유가 없음/dashboard동일한 사용자가 로그인을 탐색하려고 하면 다음으로 리디렉션할 이유가 있다./dashboard.

참조URL: https://stackoverflow.com/questions/49621891/vuejs-route-navigation-guard-on-async-auth-state-request