Как отправить заголовок авторизации с http-запросом из углового интерфейса в бэкэнд nestjs - PullRequest
Новая
       34

Как отправить заголовок авторизации с http-запросом из углового интерфейса в бэкэнд nestjs

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

Я пытаюсь разрешить моим угловым клиентам проходить аутентификацию в моем бэкэнде nestjs, чтобы разрешить открытие веб-сокетов только авторизованным пользователям.

Я следовал этому руководству для настройки моих угловых клиентов +Серверный сервер nestjs websocket: https://www.joshmorony.com/creating-a-simple-live-chat-server-with-nestjs-websockets/

Он показывает, что существует объект с именем SocketIoConfig, который принимает URL-адрес и параметры для открытия соединения через веб-сокет с серверной частью nestjs.Насколько я понимаю, чтобы открыть веб-сокет, браузер сначала отправляет http-запрос, а затем получает ответ «upgrade to ws», если запрос был успешным.Я хотел бы присоединить заголовок авторизации к этому начальному HTTP-запросу, добавив заголовки к объекту параметров в объекте SocketIoConfig.

В клиентском app.module.ts у меня есть это, чтобы открыть соединение: 

const config: SocketIoConfig = { url: 'http://localhost:3333', options: { }};

@NgModule({
  declarations: [AppComponent, ChatComponent],
  imports: [BrowserModule, HttpClientModule, 
SocketIoModule.forRoot(config)],
  providers: [ ChatService ],
  bootstrap: [AppComponent]
})
export class AppModule {}

То, что я ожидал бы, это то, что я мог бы добавить объект заголовков в объекте параметров и добавить к нему заголовок Authorization, например так: 

const config: SocketIoConfig = { url: 'http://localhost:3333', options: {
     headers: {
       Authorization: Bearer A8V342CsArf2
       }
    }
};

Однако, когда я открываю вкладку сети Chrome припри установлении соединения я не вижу заголовка авторизации в заголовках запроса.Почему этот заголовок не прикреплен к открытому запросу на соединение?

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Если все ваши запросы должны проходить проверку подлинности с использованием одного и того же токена, рассмотрите возможность использования перехватчика : 

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class AuthTokenInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req.clone({ setHeaders: { Authorization: `Bearer 123abc` } }));
  }

}

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

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

Вы должны использовать угловые заголовки (я предполагаю, что это работает так же и с сокетами) 

 headers = {
   Authorization: `Bearer ${getAccessToken()}`
 };

 const req = request.clone({
     url: 'http://localhost:3333',
     withCredentials: true,
     setHeaders: headers
 });
...