不寻常的重定向

Question

我使用 Vue.js、vue-router 和 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 商店：

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

在 vue-router 中，我确保在进入根目录之前，它会检查用户是否被授权。如果没有，将其重定向到登录页面。并在登录页面中检查用户是否被授权。如果没有，则重定向到根目录。所以，我已经登录并且我在根目录中。我重新加载页面并立即重定向到登录页面并立即重定向到根目录，没有其他任何事情发生。这一切都发生在 1 秒内，看起来很丑陋。

Answer 1

firebase.auth().onAuthStateChanged() 是异步的。所以当我们能够访问user 时，路由守卫正在被执行。这就是您被重定向到登录页面的原因。

到那时异步调用已经完成，我们可以访问user。由于您正在登录页面中检查user，并且现在user 可用，您将被踢回根路由。

默认情况下，Firebase 会在 localStorage 中的 'firebase:authUser' 键下存储一个令牌，以保留 auth state persisted 。

因此您可以检查此密钥是否存在于您的路由保护中的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-persistedstate 的vuex 插件来保持与user 对应的vuex 状态。然后检查user 状态以保护路由。然后当用户注销时清除user 状态。查看这个 post 关于 vuex 持久状态。

注意：

截至firebase v4.12.0，身份验证状态持久性（用于本地持久性）已从本地存储移动到索引数据库。

由于这是 firebase 的内部实现，未来可能会发生变化，因此依靠检查本地存储中是否存在 firebase:authUser 来确认用户的登录状态并不是一个好主意。

因此，最好按照上面替代方法中提到的那样保留用户数据并使用它来检查用户是否登录