專案實作

欲解決問題

1. 不希望網站每次跳頁都從伺服器抓取資料：在讀取網站前判斷使用者是否已登入
2. 已登入->Homepage；未登入->Login Page

解決方法

1. 使用router的路由守衛

路由守衛

beforeEach(to, from, next)：

• 用途：在每次導航之前被調用，常用於進行全局的路由權限檢查、身份驗證等操作。
• 參數：
  • to: 即將進入的路由對象。
  • from: 即將離開的路由對象。
  • next: 函數，用於確定是否進行下一步的導航，可以傳入一個路徑進行手動導航。

簡單例子

目的：想讓已認證用戶導向其他頁面

// router/index.js
const routes = [
  {
    path: '/public',
    component: PublicComponent
  },
  {
    path: '/private',
    component: PrivateComponent,
    meta: {
      requiresAuth: true
    }
  }
];

router.beforeEach((to, from, next) => {
console.log("beforeEach to", to) // 可以先console.log出對象
console.log("beforeEach from", from)
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 如果路由需要身份驗證且用戶未驗證，可以將用戶導向登錄頁面
    next('/login');
  } else {
    // 否則，可以繼續導航
    next();
  }
});

1. 檢查 to.meta.requiresAuth 是否為 true以及用戶是否已經驗證。
2. 未驗證：將用戶導向登錄頁面；已驗證：我們允許用戶繼續訪問該路由。

專案實例

• 使用!indexUserInfo.uid的原因：不希望在使用者已經登入的情況下每次跳頁的時候都調用一次authstatechange

router.beforeEach(async (to, from, next) => {

console.log("beforeEach to", to)

console.log("beforeEach from", from)

// 使用者未登入

if (!indexUserInfo.uid) {

try {

const result = await authStateChanged()

if (result.uid) {

if (from.fullPath === to.fullPath && to.name !== "Home") {

// 使用者已登入且從 LoginPage 到 HomePage，則使用 next({ name: "Home" }) 將路由導向到名稱為 "Home" 的路由。

next({ name: "HomePage" })

} else if (from.fullPath !== to.fullPath && to.name !== "Login") {

// 使用者未登入，則使用 next({ name: "Login" }) 將路由導向到名稱為 "Login" 的路由。

next({ name: "LoginPage" })

} else {

next() // 繼續原本的導航

}

} else {

next() // 繼續原本的導航

}

} catch (error) {

console.error("Error during authentication check:", error)

next({ name: "LoginPage" }) // 錯誤時導航到 LoginPage

}

} else {

// 如果使用者已登入，繼續導航

next()

}

})

References

1.Vue Router-Dynamic Route動態路由