비정상적인 리다이렉트

비정상적인 리다이렉트

Vue.js, vue-router fire Firebase 。서서 main.js츠키다

created() {
    firebase.initializeApp({
        apiKey: "xxxxxxxxxxx",
        authDomain: "xxxxxxx.firebaseapp.com",
        databaseURL: "https://xxxxxxxxxx.firebaseio.com",
        projectId: "xxxxxxxxxx",
        storageBucket: "",
    })
    firebase.auth().onAuthStateChanged((user) => {
        if(user) {
           this.$store.dispatch('autoSignIn', user)
        }
    })
}

Vue-Store는 다음과 같습니다.

state: {
    user: null
},
mutations: {
    setUser(state, payload) {
        state.user = payload
    }
},
actions: {
    autoSignIn({commit}, payload) {
        commit('setUser', {
            id: payload.uid
        })
    }
}

vue-router에서 루트 디렉토리로 진행하기 전에 사용자가 인증되었는지 확인했습니다.그렇지 않은 경우 로그인 페이지로 리디렉션합니다.또한 로그인 페이지에서 사용자의 권한이 있는지 여부를 확인합니다.그렇지 않으면 루트 디렉터리로 리디렉션됩니다.로그인하여 루트 디렉토리에 있습니다.페이지를 새로고침하면 로그인 페이지로 즉시 리디렉션되고 루트 디렉토리로 리디렉션되지만 다른 작업은 발생하지 않습니다.이 모든 것이 1초 만에 일어나 흉측해 보인다.

firebase.auth().onAuthStateChanged()을 사용하다이면 우리가 할 수 예요.user루트 가드가 실행되고 있습니다.그렇기 때문에 로그인 페이지로 리다이렉트 됩니다.

되면, 「」에 할 수 됩니다.user★★★★★★★★★★★★★★를 체크하고 있기 user에서, 「」를 참조해 .user사용할 수 있습니다.트트루루 돌돌돌돌돌

는 "에 토큰을 참조해당 은 "Firebase"에 저장됩니다.localStorage'firebase:authUser'auth 상태를 유지하다.

이 가 이 키에 할 수 .localStorage 내

router.beforeEach((to, from, next) => { 
  //check local storage
  let loccalStorageKeys = Object.keys(window.localStorage);
  const firebaseAuthUser = loccalStorageKeys.filter(item => item.startsWith('firebase:authUser'))[0];

  if(firebaseAuthUser){
    next();
  }else{{
    next('/login');
  }}
})

체크는 동기적이기 때문에 점프 리다이렉트를 방지할 수 있습니다.

vuex에 상태를 .user "vuex :vuex-persistedstate '...'을 user스테이트를 지정합니다. 후 하면 []를 지웁니다.user상태. vuex-peristed 상태에 대한 이 게시물을 확인하십시오.

주의:

Firebase v4.12.0에서 인증 상태 허용(LOCAL 허용)이 로컬 스토리지에서 색인화된 스토리지로 이동됨DB.

될 수 as as as as as것 as as as as as as as as as as as as as as as as as as as as as, as as as as as as as as as as as as as as as as as as as as as as as as?firebase:authUser로컬 스토리지에 존재하여 사용자의 로그인 상태가 좋지 않음을 확인합니다.

따라서 위의 대체 방법으로 설명한 대로 사용자 데이터를 유지하고 이를 사용하여 사용자가 로그인했는지 여부를 확인하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/49649676/unusual-redirects