Blazor перед рендерингом вызова - PullRequest
Новая
       2

Blazor перед рендерингом вызова

0 голосов
/ 18 февраля 2020

Я использую клиентский сервер Blazor, который связывается с API, получает токен и сохраняет его в локальном хранилище. Когда я направляюсь на вторую страницу, я хочу проверить, есть ли токен! Я не могу найти подходящее место, чтобы проверить это или где. Я попробовал на макете и с переопределением OnInitialized, и это работает, но вы получаете это ужасное мерцание, когда пользовательский интерфейс загружается, а затем проверка завершается, поэтому он перенаправляет, в основном пользователь частично видит страницу, к которой у него тоже не должно быть доступа. Куда я должен звонить по этой проверке или как я должен это делать.

Любые предложения приветствуются. Спасибо и извините, если я не так уж новичок в Blazor.

1 Ответ

0 голосов
/ 18 февраля 2020

Вы можете создать службу, функциональность которой заключается в том, чтобы сохранять токен в локальном хранилище и извлекать его при необходимости, например, когда вы хотите вызвать защищенную конечную точку Web Api ...

Должны ли мы назвать это TokenProvider? Пожалуйста, определите класс с именем так ... Ниже приведен код для такого класса:

TokenProvider.cs 

using Microsoft.JSInterop;


public class TokenProvider
{
    private readonly IJSRuntime JSRuntime;

    public TokenProvider(IJSRuntime JSRuntime)
    {
        this.JSRuntime= JSRuntime;
    }

    public async Task<string> GetTokenAsync()
        => await JSRuntime.InvokeAsync<string>("localStorage.getItem", 
                                                         "authToken");

    public async Task SetTokenAsync(string token)
    {
        if (token == null)
        {
            await JSRuntime.InvokeAsync<object>("localStorage.removeItem", 
                                                            "authToken");
        }
        else
        {
            await JSRuntime.InvokeAsync<object>("localStorage.setItem", 
                                                   "authToken", token);
        }

    }

 }

Обратите внимание, что служба IJSRuntime внедряется в конструктор служба. Затем вы должны добавить этот сервис в контейнер DI. Добавьте следующий код в свой класс запуска 

services.AddScoped<TokenProvider>();

Теперь вы можете использовать TokenProvider в своем компоненте:

Предположим, вам нужно вызвать защищенную конечную точку Web Api, которая возвращает массив WeatherForcast. объекты, которые будут использоваться в вашем компоненте FetchData (FetchData.razor, шаблон по умолчанию). Чтобы это работало, вам необходимо: * внедрить службу TokenProvider в ваш компонент FetchData: поместить эту директиву @inject вверху страницы, например: 

@page "/fetchdata"

@inject TokenProvider TokenProvider

И в OnInitializedAsyn c life метод цикла сделать это: 

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        var httpClient = clientFactory.CreateClient();
        httpClient.BaseAddress = new Uri("https://localhost:44381/");

        var token = await TokenProvider.GetTokenAsync();
        forecasts = await httpClient.GetJsonAsync<WeatherForecast[]> 
             ("api/weatherforecast?startDate=12/29/2019", new 
                         AuthenticationHeaderValue("Bearer", token));
    }
}

TODO:

1. Добавьте @inject IHttpClientFactory clientFactory вверху страницы. Это позволяет вам внедрить службу IHttpClientFactory, которая предоставляет объект службы HttpClient для вызова вашего Web Api. Также следует добавить службу IHttpClientFactory в контейнер DI в методе Startup.ConfigureServices: services.AddHttpClient();

Вот директива использования, которая может вам понадобиться:

@using System.Text; @using System.Text.Json; @using System.Text.Json.Serialization; @using Microsoft.AspNetCore.Components; @using System.Net.Http; @using System.Net.Http.Headers; @using Microsoft.Net.Http;

Заметили ли вы, что токен отправлен в AuthenticationHeaderValue? Чтобы иметь возможность использовать этот объект и связанные службы, добавьте services.AddAuthorizationCore(); к методу Startup.ConfigureServices

. Теперь ваш метод Startup.ConfigureServices должен выглядеть примерно так: 

public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddAuthorizationCore();
         services.AddScoped<TokenProvider>();
        services.AddHttpClient();
    }

Надеюсь, это поможет ...

...