У меня есть реактивный проект. Одно приложение - это проект 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.
Есть ли способ показать безопасное и эффективное изображение?