JavaScript ошибка взаимодействия при вызове javascript из OnInitializedAsyn c Blazor - PullRequest
Новая
       39

JavaScript ошибка взаимодействия при вызове javascript из OnInitializedAsyn c Blazor

0 голосов
/ 26 апреля 2020

Я слежу за примером приложения из ND C Oslo, которым является это приложение: https://github.com/SteveSandersonMS/presentation-2019-06-NDCOslo/tree/master/demos/MissionControl. Это реализует JWT как аутентификацию и авторизацию. Однако, когда я пытался скопировать реализацию кода в серверную версию Blazor, я получаю сообщение об ошибке при попытке сохранить токен JWT из локального хранилища, описанного ниже "

JavaScript interop calls cannot be issued at this time. This is because the component is being 
statically rendererd. When prerendering is enabled, JavaScript interop calls can only be performed 
during the OnAfterRenderAsync lifecycle method.

Вот мой блазорский код 

protected override async Task OnInitializedAsync()
{
    var token = await TokenProvider.GetTokenAsync();
    Branches = await Http.GetJsonAsync<List<BranchDto>>(
        "vip/api/lookup/getbranches",
        new AuthenticationHeaderValue("Bearer", token));
}

Ошибка происходит от 

public async Task<string> GetTokenAsync()
{
   //Code Omitted for brevity 
   //This line of code is equivalent to the IJSRuntime.Invoke<string>("localstorage.getitem","authToken") 
   //change to use Blazore.LocalStorage.
    var token = await _localStorageService.GetItemAsync<string>("authToken");
    return token;
 }

Я попытался выполнить код на OnAfterRenderAsyn c (bool firstRender) и ошибка исчезла, но сетка, связанная с запросом API, не отображается. Запрос API должен заполнить источник данных для сетки, который должен быть OnInitializedAsyn c Любой обходной путь?

Обновление! Я переместил код OnAfterRenderAsyn c, добавил метод StateHasChanged и получил желаемое поведение. Я забыл, что соединение для рендеринга было сигналом R соединение.

1 Ответ

0 голосов
/ 26 апреля 2020

Согласно «Обнаруживать, когда приложение Blazor Server предварительно выполняет рендеринг» , вы можете безопасно запускать код взаимодействия только в методе жизненного цикла OnAfterRenderAsync.

Однако, поскольку он запускается после цикл рендеринга, вам нужно будет уведомить ваш компонент для повторного рендеринга, используя StateHasChanged() после завершения асинхронного процесса: 

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var token = await TokenProvider.GetTokenAsync();
        Branches = await Http.GetJsonAsync<List<BranchDto>>(
            "vip/api/lookup/getbranches",
            new AuthenticationHeaderValue("Bearer", token));

        StateHasChanged();
    }
}
...