如果未通過身份驗證，則將用戶重定向到頁面加載時的登錄屏幕（Nuxt-firebase）

Question

我正在嘗試在我的 Nuxt 應用程序中設置導航守衛，以便在用戶未通過 Firebase 身份驗證進行身份驗證時將用戶重定向到登錄屏幕。 當用戶嘗試導航時，我的路由器中間件成功重定向了他們，但在頁面加載時他們沒有被重定向。

我確實意識到中間件甚至沒有在頁面加載時被觸發。 我找到了嘗試使用插件來處理頁面加載重定向的建議，但它不起作用。 從插件中調用 router.push 不會重定向用戶。

以下是關於我的設置的一些注意事項。 這將作為沒有 SSR 的 SPA 直接部署到 firebase 托管。 它使用帶有 Firebase 身份驗證服務的 Nuxt-Firebase 模塊。

// nuxt.config.js

  target: "server", // server here works when I deploy to firebase, but I also tried static
  ssr: false,
  middleware: ["auth"],
  plugins: [
    "~/plugins/auth.js",
  ],
  modules: [
    [
      "@nuxtjs/firebase",
      {
        services: {
          auth: {
            initialize: {
              onAuthStateChangedMutation:
                "authData/ON_AUTH_STATE_CHANGED_MUTATION",
              onAuthStateChangedAction: "authData/ON_AUTH_STATE_CHANGED_ACTION",
              subscribeManually: false,
            },
          },
        },
      },
    ],
  ],
};

這是我認為可以解決此問題的示例插件，但調用 handleLoggedOut 似乎對頁面加載沒有任何作用。

// --- plugin to redirect user --- /plugins/auth.js   ---
export default function (context, inject) {
  const auth = {
    handleLoggedOut: () => {
      console.log("logout handled");
      context.redirect("/login");
    },
  };
  inject("auth", auth);
}

// --- store actions --- /store/authData.js  ---
  actions: {
    async ON_AUTH_STATE_CHANGED_ACTION(
      { commit, state, dispatch },
      { authUser, claims }
    ) {
      if (authUser) {
         // logged in
      }
      else {
         // attempting to redirect here does not work
         this.$auth.handleLoggedOut()
      }
   }

我是 Nuxt 的新手，我似乎找不到解決我的問題的例子。

任何幫助將不勝感激，謝謝！

Answer 1

代碼看起來不錯，但是您可以只使用this.$fire.auth.signOut()並且可以刪除 auth 插件。

例子：

// --- 存儲操作 --- /store/authData.js ---

actions: {
    async signOut({ commit }, payload) {
        try {
           await this.$fire.auth.signOut();
           // This is just a guard to avoid navigation guard error (NavigationDuplicated), 
           // you can remove the if block
           if (!payload) {
              this.$router.push('/login')
           }
           commit(ON_AUTH_STATE_CHANGED_MUTATION, { authUser: null})
        } catch(err) {
           console.log(err)
        }

    },
async ON_AUTH_STATE_CHANGED_ACTION(
      { commit, state, dispatch },
      { authUser, claims }
    ) {
      if (authUser) {
         // logged in
      }
      else {
         // attempting to redirect here does not work
         return dispatch('signOut')
      }
   }

}

Answer 2

將用戶重定向到頁面加載登錄的解決方案是將其放在我的身份驗證中間件中：

export default function ({ redirect, store, route }) {
  // https://nuxtjs.org/docs/internals-glossary/context#redirect
  if (!store || !store.getters || !store.getters["authData/isLoggedIn"]) {
    window.onNuxtReady(() => {
      window.$nuxt.$router.push("/login");
    });
  }
}