什麼是身分驗證流程？

身分驗證流程是確認使用者身分並管理他們對應用程式某些部分的存取的過程。當您使用網路應用程式（例如社交媒體網站）時，這涉及檢查使用者是否是他們所說的人（登入），然後授予他們存取某些功能的權限。

它在 React 中是如何運作的？

在 React 中，當您想要處理使用者驗證時，通常會與處理繁重工作的後端伺服器進行互動。它通常是這樣運作的：

1. 註冊與登入端點

• 註冊端點：當新用戶註冊時，他們會將其詳細資訊（如使用者名稱、電子郵件、密碼）發送到伺服器。然後伺服器為他們創建一個帳戶。
• 登入端點：現有使用者登入時，會將其使用者名稱和密碼傳送至伺服器。伺服器檢查這些詳細資訊是否正確。

2. 令牌：存取令牌和刷新令牌

登入成功後，伺服器返回兩個重要的token：

• 存取權杖：

  • 這就像一個短期通行證，允許用戶訪問應用程式的某些功能。它的壽命通常很短（在本例中為 5 分鐘）。
  • 每次使用者發出請求（例如查看他們的個人資料或發布某些內容）時，此令牌都會發送到伺服器以證明他們已登入。

• 刷新代幣：

  • 這就像是存取令牌過期時使用的備份通行證。更持久。
  • 當存取權杖過期（5分鐘後）時，應用程式可以使用刷新令牌來取得新的存取令牌，而不是讓使用者再次登入。

3. 在瀏覽器中儲存令牌

用戶登入並收到這些代幣後，應用程式需要將它們儲存在用戶裝置上的某個位置。這就是 localStorage 的用武之地：

• localStorage： 這是網頁瀏覽器中的一項功能，可讓您在使用者的瀏覽器中儲存資料（如代幣）。
  • setItem() 方法： 用於儲存資料。例如，您可以使用 localStorage.setItem('accessToken', tokenValue).
  之類的內容儲存存取令牌和刷新令牌
  • getItem() 方法： 用於擷取儲存的資料。例如，您可以使用 localStorage.getItem('accessToken').
  等方式取得儲存的存取令牌

4. 使用存取權杖發出請求

每次使用者執行需要伺服器互動的操作（例如發布狀態或檢視訊息）時，應用程式都會向伺服器發送請求，並在授權標頭中附加存取權杖。這告訴伺服器使用者已登入並允許執行該操作。

5. 處理過期令牌

• 存取權杖過期： 如果伺服器回應 401 錯誤，則表示存取權杖已過期。然後，應用程式將使用刷新令牌來請求新的存取權杖。

• 刷新令牌過期：如果刷新令牌也過期了（這可能會在很長一段時間後發生），伺服器將再次回應 401 錯誤。此時，應用程式會將使用者重新導向到登入頁面，要求他們再次登入以取得新令牌。

6. 重新發送失敗的請求

一旦應用程式使用刷新令牌來獲取新的存取令牌，它將重新發送因令牌過期而失敗的原始請求。這樣，用戶就不會遇到任何中斷。

概括

• 身分驗證流程：這是應用程式確認您是誰並為您提供功能存取權限的方式。
• 存取權杖：存取應用程式中資源的短期金鑰。很快就會過期。
• 刷新令牌： 長期備份金鑰，用於在舊存取權杖過期時取得新的存取權杖。
• localStorage： 瀏覽器在使用者裝置上儲存這些代幣的方式。
• 授權標頭： 存取權杖包含在對伺服器的請求中。
• 401 錯誤： 令牌已過期且應用程式需要採取操作（刷新令牌或要求使用者重新登入）的訊號。

此流程可確保使用者可以保持登入狀態並安全地使用應用程序，而無需始終重新輸入其憑證。