Nuxt + Firebase 登录后重定向到受限页面

Question

赏金将在 4 天后到期。 此问题的答案有资格获得+50声望赏金。 Marko Kavaš希望引起对这个问题的更多关注。

我正在使用带有 Firebase 身份验证的 Nuxt，但在登录后重定向到受限页面时遇到问题。 登录工作正常，但是当我在登录后将用户重定向到他的个人资料页面时，它会重定向到“/login”而不是“/profile”——就像它还没有注意到登录一样。 但是我可以正常访问个人资料页面。 这是我的代码。 任何帮助appriciated。

中间件/auth.js

export default function ({ store, redirect }) {
if (!store.getters.isLoggedIn) {
  return redirect('/login')
}

}

登录方式

async login() {
        await this.$fire.auth.signInWithEmailAndPassword(this.formPrijava.email, this.formPrijava.geslo)
        .then(data => {
            this.$modal.hideAll();
            alert(data.user.uid);
            this.$router.push('profil');
        })
        .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
        });
    }

在 /profile 上，我正在使用中间件：'auth'。

我将添加mutations.js、getters.js 和state.js 以防万一。

getters.js

    export default {
    isLoggedIn: (state) => {
      try {
        return state.authUser.uid !== null
      } catch {
        return false
      }
    }
  }

突变.js

import initialState from './state'

export default {
  RESET_STORE: (state) => {
    Object.assign(state, initialState())
  },

  SET_AUTH_USER: (state, { authUser }) => {
    state.authUser = {
      uid: authUser.uid,
      email: authUser.email
    }
  }
}

state.js

export default () => ({
    authUser: null
})

Answer 1

不确定，但我认为你在router.push上有错字

路径字符串应该是“profile”吗？

Answer 2

登录后您永远不会更新您的 vuex 存储，这就是为什么中间件仍将您重定向到登录页面的原因，因为这种情况仍然成立：

export default function ({ store, redirect }) {
if (!store.getters.isLoggedIn) {
  return redirect('/login')
}

使用 firebase 登录后，您必须发送一个操作来更新 vuex 存储：

await this.$fire.auth.signInWithEmailAndPassword(this.formPrijava.email, this.formPrijava.geslo)
        .then(data => {
        store.commit('SET_AUTH_USER', {
            authUser: data.user
        });
        // rest of the code.