在 Firebase（+ 快速后端）中驗證 GET 請求？

Question

現在我正在嘗試了解 Firebase 身份驗證在后端是如何工作的。 似乎主要方法是讓 Web 客戶端獲取一個 id 令牌，然后對於每個 REST 請求，在將請求發送到后端之前將該令牌注入到Authorization http 標頭中（官方文檔， 官方文檔 2 ， SO 答案） . 作為一個起點，我克隆了一個使用這種方法的超級基礎 Github 項目（ teroyks - firebase-auth-api ），您可以看到 id 令牌注入在前端是如何工作的：

// fetch timestamp from API
// authenticate API request with JWT auth token
const fetchFromApi = userIdToken => {
  return fetch('/api', {
    headers: {
      Authorization: `Bearer ${userIdToken}`,
    },
  })
    .then(response => {
      ...

你可以在github中找到完整的代碼： frontend backend

但是，我希望能夠在我的網站上創建只有登錄用戶才能訪問的頁面。 例如，路徑https://www.mywebsite.com/profile應顯示當前用戶的個人資料，如果他們未通過身份驗證，請將其重定向到登錄。 但是我還沒有看到任何執行此操作的 Firebase 示例。 如果用戶點擊一個鏈接到https://www.mywebsite.com/profile （也許它在他們的書簽或其他東西中），瀏覽器會發出 GET 請求而不是我，所以我無法注入 id請求的令牌。 我想到的一種解決方法是在初始請求時只加載一個空白頁面，然后空白頁面運行獲取 id 令牌所需的客戶端代碼並從后端檢索實際頁面內容，但這感覺非常hacky並且會阻止服務器端渲染。 解決這個問題的標准方法是什么？

Answer 1

例如，這完全取決於您是在進行客戶端渲染還是服務器端渲染

如果您正在對 html 文件進行服務器端渲染，則可以制作一個中間件，如果頭檢查中沒有提供 accessToken，則重定向到/login

Node Express - 重定向到登錄視圖

如果你在做客戶端渲染

 firebase.auth().onAuthStateChanged(user => {
        if (user) {
          content.innerHTML = `<p>Logged in as ${user.displayName}</p>
          <p><button onClick="firebase.auth().signOut();">Logout</button></p>`
          user
            .getIdToken() // this is where firebase gets the token for you 
            .then(token => {
              console.log(`uid token: ${token}`)
              return fetchFromApi(token)
            })
            .then(content => {
              apiContent.innerHTML = content
            })
        } else {
         //redirect to login
          window.location.replace("/login")
        }
      })