Есть ли способ показать безопасный и эффективный образ? - PullRequest
0 голосов
/ 14 марта 2020

У меня есть реактивный проект. Одно приложение - это проект API, а другой - сервер идентификации. Проект Api защищен токеном-носителем сервером идентификации.

Проект Api имеет функцию в FilesController. Эта функция возвращает URL изображения. Эта функция должна иметь токен beraer в заголовке авторизации для выполнения.

Эта функция ниже

[HttpGet]
[Route("api/file/{types}/{param1}")]
public string Files(string types, string param1)
{
    return _fileService.GetDefaultLogoPath((Model.Enum.LogoType)logoType);
}

У меня есть компонент реагирования, чтобы показать URL возврата API. Этот компонент ниже

public componentDidMount() {
    this.fetchImage();
}
fetchImage = () => {
    fetch(this.props.imageUrl, {
        headers: {
            'Authorization': 'Bearer ' + 'AccessToken',
            'Access-Control-Allow-Origin': '*'
        }
    }).then((response: any) => {
        if (response.status === 200) {
            return response.text();
        } else {
            throw(new Error(response.statusCode));
        }
    }).then(imageUrl => {
        if (this.props.preventCaching) {
            imageUrl += (imageUrl.indexOf('?') > 0 ? '&' : '?') + '_rnd=' + Date.now();
        }
        this.setState({ source: imageUrl });
    })
    .catch((err) => {
        _logger.error('in componentDidMount -> image could not be loaded -> ' + this.props.imageUrl, err);
        this.setState({ source: _common.GetDefaultImages(this.props.imgType ? '' : this.props.imgType as string) });
    });
}
onClick = (evt: any) => {
    if (typeof this.props.onClick === 'function') {
        this.props.onClick(evt);
    }
}

public render() {
    return <img
        style={this.props.style}
        src={this.state.source}
        className={this.props.class}
        width={this.props.width}
        height={this.props.height}
        onError={typeof this.props.onError === 'function' ? this.props.onError :     _common.OnErrorImageSrc }
        data-imgtype={this._imgType}
        onClick={this.onClick}
    />;
}

Этот компонент добавляет токен на предъявителя для URL URL. Этот код работает, но больше API вызывают больше изображения на странице. Например, изображение 100.

Есть ли способ показать безопасное и эффективное изображение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...