Перехватить интерфейс кендо для GET-запросов jQuery grid в приложении Angular 7 - PullRequest
Новая
       18

Перехватить интерфейс кендо для GET-запросов jQuery grid в приложении Angular 7

0 голосов
/ 10 мая 2019

Я пытаюсь использовать кендо UI внутри проекта Angular 7.Для этого я установил @ progress / kendo-ui

Теперь я пытаюсь использовать технологию MVVM для установки kendo DataSource:

html page 

<div id="hubListGrid" data-bind="source: source"></div>

файл машинописного текста, гдеИспользуется mvvm: 

const viewModel = kendo.observable({
    source: new kendo.data.DataSource(
        {
            transport: {
                read: "http://localhost:26264/api/hub/GetHubList"
            }
        }
    )
});

kendo.bind($('#hubListGrid'), viewModel);

Проблема заключается в том, что мой WebAPI возвращает ответ {"message": "Авторизация для этого запроса."}, когда я пытаюсь прочитать этот DataSource, потому что у меня есть HttpInterceptor, который перехватываетвсе запросы на обслуживание и добавьте токен аутентификации для этих запросов: 

import { Inject, Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpResponse,
HttpHandler,
HttpEvent,
HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError, from } from 'rxjs';
import { tap, map, catchError } from 'rxjs/operators';

import { StorageSvc } from '../factories/storageSvc';
import { SysSettings } from '../constant/sysSettings';
import { SingletonRootClass } from '../../../src/app/shared/singleton-root';
import { AuthService } from './authService';
import { Router } from '@angular/router';

@Injectable()

export class InterceptService implements HttpInterceptor {
inflightAuthRequest = null;


constructor(@Inject(StorageSvc) public storageSvc: any,
private authService: AuthService,
private router: Router
) { }

// intercept request and add token
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

const authData = this.storageSvc.retrieve('authorizationData');
const language = authData && authData.profile
? { languageCode: authData.profile.laguageCode, regionCode: authData.profile.regionCode }
: this.getDefaultLanguage();

const headers = {
'Accept-Language': this.buildAcceptLanguageHeader(language.languageCode, language.regionCode),
'NotificationConnectionId': SysSettings.NotifyConnectionId
};

if (authData) {
headers['Authorization'] = 'Bearer ' + authData.token;
headers['UserName'] = authData.userName;
}

request = request.clone({
setHeaders: headers
});

return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
let data = {};
data = {
reason: error && error.message ? error.message : '',
status: error.status
};

if (error.status === 401) {
this.authService.refreshToken();
} else {
this.authService.logOut();
this.router.navigate(['/login']);
}
return throwError(error);
}));
}

, но http://localhost:26264/api/hub/GetHubList Веб-запрос не перехватывается HttpInterceptor Angular 7. Не могли бы вы предоставить какие-либо решения или ссылки, которые разъяснят, как яможет перехватывать запросы GET от источника данных и добавлять токен аутентификации?

Что-то похожее на https://www.telerik.com/forums/using-http-interceptor-to-provide-auth-token и http://dojo.telerik.com/@popov/OTUJO, но для Angular 7?

Пожалуйста, дайте мне знать, если янеобходимо предоставить более подробную информацию или объяснения.

Спасибо.

...