I am following a sample app from the NDC Oslo which is this app: https://github.com/SteveSandersonMS/presentation-2019-06-NDCOslo/tree/master/demos/MissionControl.This implements JWT as authentication and authorization. However when I tried to copy the implementation of the code to a Server Side Blazor, I'm getting an error when I try to get the JWT token stored from the local storage described below"
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.Here is my blazor code
protected override async Task OnInitializedAsync(){ var token = await TokenProvider.GetTokenAsync(); Branches = await Http.GetJsonAsync<List<BranchDto>>("vip/api/lookup/getbranches", new AuthenticationHeaderValue("Bearer", token));}The error comes from
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; }I tried perform the code on OnAfterRenderAsync(bool firstRender) and the error is gone but the grid which is binded to the API request has no display. The API request must fill the data source for the grid which must be OnInitializedAsync. Any workaround on this?
Update!I moved the code OnAfterRenderAsync and added the StateHasChanged Method and I got the desired Behavior.I forgot that the connection for rendering was a signalR connection.