設定提供者與角色的存取權

使用者驗證就緒之後，您的購物清單 Web 應用程式需要一種方式以限制未登入的使用者存取某些頁面，並只允許透過特定提供者登入。

我們將了解 Azure Static Web Apps 中的路由設定與角色，以微調 Web 應用程式的使用者存取權。

Azure Static Web Apps 的設定檔

Azure Static Web Apps 的設定會在 staticwebapp.config.json 檔案中定義，其控制下列設定：

staticwebapp.config.json 的建議位置位於資料夾中，該資料夾設定為在部署期間所選擇的 app_location 設定。然而，檔案可能會放在應用程式原始程式碼資料夾中的任何位置。

在我們的使用案例中，我們將探討路由設定，以達成所要的目標。

在上一個區段中，我們看到預設會啟用所有驗證提供者。我們可以在設定中新增路由規則加以變更。

例如，若要停用透過 GitHub 提供者的登入，您可以在 staticwebapp.config.json 檔案中新增這樣的路由規則。

{
  "routes": [
    {
      "route": "/.auth/login/github",
      "statusCode": 404
    }
  ]
}

我們會強制用於向 GitHub 提供者進行驗證的路由 /.auth/login/github 傳回 404 (找不到) 錯誤，讓使用者無法存取。可以依您的需要新增多個路由規則，以停用所有不想要使用的提供者。

根據預設，每個人都可以存取路由，沒有任何限制。您可以藉由將一或多個角色名稱新增至規則的 allowedRoles 陣列來保護路由。根據預設，每個使用者都屬於內建的 anonymous 角色，而所有登入的使用者都是 authenticated 角色的成員。

這表示若要限制只有經過驗證的使用者可使用路由，您可以將內建的 authenticated 角色新增至 allowedRoles 陣列。

{
  "routes": [
    {
      "route": "/profile",
      "allowedRoles": ["authenticated"]
    }
  ]
}

有了該設定之後，若未經驗證的使用者嘗試存取 /profile 路由，將會傳回錯誤 401 (未授權)。

您也可以針對所指定路由限制特定的 HTTP 方法，如下所示：

{
  "routes": [
    {
      "route": "/profile",
      "methods": ["PUT", "POST", "DELETE"],
      "allowedRoles": ["authenticated"]
    }
  ]
}

在此範例中，所有使用者都可以存取 /profile 路由上的 GET 方法，但只有經過驗證的使用者可以使用 PUT、POST 或 DELETE。

您可以在路由的結尾使用萬用字元，以比對遵循基礎模式的所有路由。例如，若要限制只有經過驗證的使用者可以使用以 /api 開頭的所有 URL，您可以撰寫：

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": ["authenticated"]
    }
  ]
}

接下來，我們將在應用程式中實作存取限制。