美好的一天,我有一个 Blazor WASM 应用程序,它将调用第三方 API 来获取页面的数据。此 API 需要一个 jwt 令牌,我在登录后检索并存储在 LocalStorage 中。
当我进行第 3 方 API 调用时,我尝试获取令牌以将其添加到 HttpClient 客户端,然后再通过管道发送它。
public async Task<IList<T>> Get(string url)
{
try
{
var request = new HttpRequestMessage(HttpMethod.Get, url);
var client = _client.CreateClient();
client.DefaultRequestHeaders.Authorization =
new AuthenticationHeaderValue("bearer", await GetBearerToken());
HttpResponseMessage response = await client.SendAsync(request);
if (response.StatusCode == System.Net.HttpStatusCode.OK)
{
var content = await response.Content.ReadAsStringAsync();
return JsonConvert.DeserializeObject<IList<T>>(content);
}
else
{
return null;
}
}
catch (Exception e)
{
return null;
}
}
private async Task<string> GetBearerToken()
{
return await _localStorage.GetItemAsync<string>("authToken");
}
它一直在遇到异常并抱怨以下内容:
{"此时无法发出 JavaScript 互操作调用。这是因为组件正在静态渲染。启用预渲染后,JavaScript 互操作调用只能在 OnAfterRenderAsync 生命周期方法期间执行。"}
有任何想法吗?
页面如下所示:
@page "/authors/"
@inject HttpClient _client
<h3 class="card-title">Index</h3>
<hr />
<br />
@if (Model == null)
{
<LoadingMessage Message="Loading Authors" />
}
else
{
@if (Model.Count < 1)
{
<LoadingMessage Message="There are no authors in the data store.
Click 'Create Author' to Begin " />
}
else
{
<table class="table table-responsive">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var author in Model)
{
<tr>
<td>@author.Firstname</td>
<td>@author.Lastname</td>
<td>
<a href="/authors/view/@author.Id" class="btn btn-primary">
<span class="oi oi-book"></span>
</a>
@*<AuthorizeView Roles="Administrator">*@
<a href="/authors/edit/@author.Id" class="btn btn-warning">
<span class="oi oi-pencil"></span>
</a>
<a href="/authors/delete/@author.Id" class="btn btn-danger">
<span class="oi oi-delete"></span>
</a>
@*</AuthorizeView>*@
</td>
</tr>
}
</tbody>
</table>
}
@code {
private IList<Author> Model;
//Tried this both Synchronous and Asynchronous
protected override void OnInitialized()
{
Model = _client.GetFromJsonAsync<IList<Author>>("api/Authors").Result;
}
}