Question

我将Firebase与VueJS（和VueRouter）一起使用。

我遇到重定向问题。我想在两页之间重定向。第一页用于身份验证，第二页用于只应对登录用户可见的内容。

我的状态包含firebase用户密钥（将通过调用firebase的变异填充）：

state: {
  user: { key: null }
}

身份验证页面这些行：

beforeCreate() {
  if (this.$store.state.user.key !== null) {
    this.$router.replace('/')
  }
}

秘密页面：

beforeCreate() {
  if (this.$store.state.user.key === null) {
    this.$router.replace('/new')
  }
}

但是：从认证页面到秘密页面的重定向不会发生。

我的Vue-dev-tools显示已设置用户密钥。

这个问题的解决方案是什么？

修改

这是调用Firebase并设置用户密钥的变种：

updateSession(state) {
  auth.onAuthStateChanged((user) => {
    if (user) {
      state.user.key = user.uid
    }
  })
}

以下是行动：

UPDATE_SESSION({ commit }) {
  commit('updateSession')
}

我在我的根组件（App.vue）中调用该操作：

beforeCreate() {
  this.$store.dispatch('UPDATE_SESSION')
}

编辑2 ：

现在我的路线数组：

routes: [
  { path: '/', component: Secret },
  { path: '/new', component: Authentication }
]

Answer 1

查看文档的Per-Route Guards部分：https://router.vuejs.org/en/advanced/navigation-guards.html

您可能想尝试类似下面的内容。通过将beforeEnter后卫放在路线上，你告诉Vue首先要这样做。 $query = http_build_query(array('aParam' => $data));参数告诉VueRouter接下来要做什么，并且可以根据需要重定向或继续到原始路由。

next

修改

您可能还想尝试使用beforeEnter(to, from, next) { if (this.$store.state.user.key === null) { next('/new') } }代替push

Answer 2

根据我们在评论中的对话，您需要这样做：

store.dispatch可以处理触发的动作处理程序返回的Promise，它也返回Promise。请参阅docs。

因此，您可以设置登录操作以重新生成这样的承诺：

a_logInUser: ({state, commit}, userInput) => {
    return new Promise((resolve, reject) => {
        firebase.auth().signInWithEmailAndPassword(userInput.email, userInput.paswword);
        resolve();
    });
}

然后在您的身份验证页面中，您可以在其中记录登录输入详细信息并单击登录按钮，将其设置为登录按钮的单击处理程序

loginUser(){
    this.$store.dispatch('a_logInUser', {email: this.email, password: this.password})
        .then((result) => {
            this.$router.replace('/');
            }, (err) => {
                // stay on this pageS
                //handle login error                
        });
    }
}

VueJS：在两页之间重定向

2 个答案: