在 blazor 中使用帶有身份驗證的 WebAPI

Question

我在創建 ASP.NET WebAPI 項目時使用 VS 2019 提供的天氣預報數據的基本模板，並添加了一些非常基本的用戶登錄身份驗證和對 JWT 令牌的支持，一切正常。

我正在嘗試創建一個 blazor 客戶端項目來使用 API 並在頁面上顯示數據。 AFAIK Blazor 不支持 localstorage 所以我使用 Blazored LocalStorage package 來給我這個能力。 我的問題源於在服務器端 blazor （ https://github.com/aspnet/AspNetCore/issues/13396 ）中無法通過 OnInitializedAsync() 使用 JS 的事實，因此我不確定如何使用這些 web api 調用。 因為這將產生一個 null 參考異常

protected override async Task OnInitializedAsync()
{
    var client = HttpFactory.CreateClient();
    var token = await LocalStorage.GetItemAsync<string>("authToken");
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
    var response = await client.GetAsync("url/WeatherForecast");
    var str = await response.Content.ReadAsStringAsync();
    Items = JsonConvert.DeserializeObject<IEnumerable<WeatherForecast>>(str);
}

一個建議是使用 OnAfterRenderAsync() 方法來調用它們，因為那時 JS 已經准備好了。 哪個半工作但顯然 UI 不匹配，因為它需要刷新 - 但是要手動刷新它似乎我必須調用 StateHasChanged(); 這反過來又再次調用 OnAfterRender 方法，結果我不得不進行檢查，但這最終感覺非常糟糕。

private bool hasRendered;
protected override async Task OnAfterRenderAsync(bool _)
{
    if (!hasRendered) return;
    var client = HttpFactory.CreateClient();
    var token = await LocalStorage.GetItemAsync<string>("authToken");
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
    var response = await client.GetAsync("https://url/WeatherForecast");
    var str = await response.Content.ReadAsStringAsync();
    Items = JsonConvert.DeserializeObject<IEnumerable<WeatherForecast>>(str);

    StateHasChanged();

    hasRendered = true;
}

使用具有身份驗證功能的 API 並在客戶端正確顯示數據的正確方法是什么？

附帶問題 HttpClient 似乎不能在服務器端注入，建議使用 HttpClientFactory - 在每個請求上創建一個客戶端或創建一個 singleton 並在整個客戶端項目中重復使用是個好主意嗎？

Answer 1

第一季度

一個建議是使用 OnAfterRenderAsync() 方法來調用它們，因為那時 JS 已經准備好了。 哪個半工作但顯然 UI 不匹配，因為它需要刷新 - 但是要手動刷新它似乎我必須調用 StateHasChanged(); 這反過來又再次調用 OnAfterRender 方法，結果我不得不進行檢查，但這最終感覺非常糟糕。

所有人都有同樣的問題，因為在Lifecycle methods中，記錄了帶有firstRender parm 的新OnAfterRenderAsync ：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ... /// your auth code here.
    }
}

第二季度

附帶問題 HttpClient 似乎不能在服務器端注入，建議使用 HttpClientFactory - 在每個請求上創建一個客戶端或創建一個 singleton 並在整個客戶端項目中重復使用是個好主意嗎？

Simplifying: I suggest to you to create two external libraries for your backend calls: one using http requests (for blazor wasm hosted model) and the other one just calling c# backend functions (for blazor server). 兩者都具有用於后端調用的通用接口。 使用DI 為每個托管的 model 設置正確的庫。