Создание заголовка глобальной авторизации в перехватчике HttpClient

Я делаю заголовок глобальной авторизации в своем приложении. Я использовал перехватчик, поэтому я не буду объявлять заголовок авторизации в своих функциях get(). Правильно ли я реализую перехватчик, поскольку, когда я вызываю функции get(), он все еще запрашивает токен. Пишет, что токен не предоставлен. Есть ли проблема в моем auth.interceptor? Должен ли я объявлять токен носителя заголовка авторизации в каждой функции get()? Я думал, что перехватчик вызывается каждый раз, когда отправляется/получается запрос?

auth.interceptor.ts

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    private authService: AuthService;

    constructor(private injector: Injector) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        this.authService = this.injector.get(AuthService);
        const token = this.authService.getToken();
            if (token) {
                req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
            }

            if (!req.headers.has('Content-Type')) {
                req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
            }

            req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
            return next.handle(req);
        }
}

продукты.component.ts

getAll() {
    return this.httpClient.get<any>(this.url).map(response => response.json());
    }

person Joseph    schedule 25.09.2017    source источник


Ответы (1)


Вы поступаете правильно!

Перехватчики предназначены для перехвата всех http-вызовов, и вы можете изменить запрос, который является глобальным.

Думаю проблема в этих условиях. вы можете отлаживать их и разрешать.

            if (token) {
                req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
            }

            if (!req.headers.has('Content-Type')) {
                req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
            }

Возможно, некоторые из них возвращают null!

Но если время для получения токена является проблемой, вы можете сделать асинхронный вызов, чтобы получить токен.

this.authService.LoginUser().subscribe(( token) => { 
   if (token) { 
     req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); 
   } 

   if (!req.headers.has('Content-Type')) { 
     req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); 
   } 

   req = req.clone({ headers: req.headers.set('Accept', 'application/json') }); 
   return next.handle(req); 
} 
});
person Aniruddha Das    schedule 25.09.2017
comment
попробуй отладить это. может быть типа контента нет в слышном - person Aniruddha Das; 25.09.2017
comment
Но почему я могу войти в свое приложение? Как я могу отладить его › - person Joseph; 25.09.2017
comment
поставьте точку останова и посмотрите, доходит ли выполнение до этого места, и все ли в порядке. еще кое-что. я уверен, что вы добавили этот перехватчик в свой модуль, верно? - person Aniruddha Das; 25.09.2017
comment
да. в основном модуле. не в модуле приложения. основной модуль экспортируется в модуль приложения - person Joseph; 25.09.2017
comment
возможно, вам нужно добавить его в модуль приложения в качестве модуля начальной загрузки. поэтому поставьте точку останова и посмотрите, во время выполнения вызовы приходят сюда - person Aniruddha Das; 25.09.2017
comment
Я изменил токен const = this.authService.getToken(); Для постоянного токена = localStorage.getItem('auth_token');. Сейчас это работает. Будет ли это нормально? - person Joseph; 25.09.2017
comment
да, если он доступен в локальном хранилище, тогда все в порядке. убедитесь, что он всегда доступен в локальном хранилище клиентского браузера и не является проблемой безопасности :) - person Aniruddha Das; 25.09.2017
comment
Давайте продолжим обсуждение в чате. - person Aniruddha Das; 25.09.2017