Токен авторизации отправляется как null в ответе в Angular

Я пытаюсь работать с REST API, предоставляемым в моем корпоративном приложении и Angular. Я пытаюсь получить некоторые данные из своего корпоративного приложения. Для этого мне нужно сделать две вещи:

1- Войдите в мое корпоративное приложение через Angular. Для этого уже существует настраиваемый REST API аутентификации, предоставляемый корпоративным приложением. Я пью то же самое. Генерируется токен аутентификации, который я сохраняю в localStorage.

2- Отправьте запрос GET в корпоративное приложение для получения данных после аутентификации. Вот где я сталкиваюсь с проблемами. Я не могу передать токен аутентификации в запросе GET. При проверке того же на вкладке «Приложение» инструментов разработчика Chrome я мог видеть в разделе «Заголовки запроса», что значение авторизации равно нулю. Ниже приведен скриншот того же:

Токен авторизации отправляется как null в ответе в Angular

Ниже мой код, который я разработал:

1 - Служба аутентификации (auth.service.ts)

     import { Injectable } from '@angular/core';
     import { HttpClient, HttpHeaders } from '@angular/common/http';
     import{Http} from '@angular/http'
     import { Observable } from 'rxjs';
     import { map } from 'rxjs/operators';
     import { URLSearchParams,Response } from '@angular/http'

     @Injectable()
     export class AuthenticationService {
     constructor(private http: Http) { }
     username:string = 'Admin';
     password:string='livelink';  
     token:any; 
     login() 
     {

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('Username', this.username);
    urlSearchParams.append('Password', this.password);
     this.http.post('http://localhost/otcs/cs.exe/api/v1/auth',urlSearchParams)
        .subscribe((res:Response) => 
        {
            // login successful if there's a jwt token in the response
            if (res) {
                const data = res.json();
                ;
                this.token = data;
                console.info(data);
                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({  ticket: data }));

            }
        });

        console.info("INSIDE LOGIN this.token  = "+this.token)//done for debugging, returning undefined
}

public getToken()
 {

    console.info("GET TOKEN VALUE "+ localStorage.getItem('ticket'))//done for debugging, returning undefined
    return localStorage.getItem('ticket');
     }

  }

2 - Токен-перехватчик (token.interceptor.ts)

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

     @Injectable()
     export class TokenInterceptor implements HttpInterceptor {
     constructor(public auth: AuthenticationService) {}
     intercept(request: HttpRequest<any>, next: HttpHandler): 
     Observable<HttpEvent<any>> {

     request = request.clone({
     setHeaders: {
     Authorization: `Bearer ${this.auth.getToken()}`
     }
   });

        return next.handle(request);
     }
   }

3 - Компонент приложения (app.component.ts)

 import { Component } from '@angular/core';
 import { AuthenticationService } from './auth.service';
 import{Http} from '@angular/http'
 import { HttpClient } from '@angular/common/http'
 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
  export class AppComponent 
  {

 constructor(private authenticationService: AuthenticationService, private 
 http:HttpClient)
   {
      this.authenticationService.login();
      this.ping() ;

    }

     public ping() {
    this.http.get('http://localhost/otcs/cs.exe/api/v1/nodes/16236/output')
     .subscribe(
  data => console.info(data),
  err => console.info(err)
        );
      }
    }

4- Модуль приложения (app.module.ts)

     import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';
     import { HttpClientModule, HTTP_INTERCEPTORS } from 
     '@angular/common/http';
     import { AppComponent } from './app.component';
     import { AuthenticationService } from './auth.service';
     import { HttpModule } from '@angular/http';
     import { TokenInterceptor } from './token.interceptor';

     @NgModule({
     declarations:[AppComponent],
     imports: [
            BrowserModule,
            HttpClientModule,
            HttpModule
           ],

    providers: [AuthenticationService,
   {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
       multi: true
}],
        bootstrap: [AppComponent]
     })
        export class AppModule { }

При запуске вышеуказанного проекта в консоли отображается результат ниже:

Токен авторизации отправляется как null в ответе в Angular

Я не могу понять, почему мой токен не передается с запросом GET.

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

Henry 12.06.2018 18:45

Привет, Генри, последний снимок экрана сделан из окна консоли, в котором отображается ошибка. проблема в том, что мой запрос GET не может получить токен авторизации. Я успешно генерирую то же самое из запроса POST, но при попытке прикрепить его к запросу GET я получаю несанкционированную ошибку

nemish nigam 12.06.2018 19:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
4 206
2

Ответы 2

Вы сохраняете токен, используя эту строку

localStorage.setItem('currentUser', JSON.stringify({  ticket: data }));

Но ваша функция getToken() ошибается от localStorage. Я думаю, ваша функция должна выглядеть так:

public getToken() {
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
    console.info("GET TOKEN VALUE ", currentUser.ticket))//done for debugging
    return currentUser.ticket;
}

Надеюсь, поможет

Привет Кастро! Выдается сообщение об ошибке «TypeError: JSON.decode не является функцией».

nemish nigam 12.06.2018 19:33

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

nemish nigam 12.06.2018 19:56

@nemishnigam ты прав, это JSON.parse, исправь.

Castro Roy 12.06.2018 21:54

@nemishnigam Я не понимаю, что вы имеете в виду под «двумя разными токенами аутентификации как из моих запросов на размещение, так и на получение», не могли бы вы уточнить?

Castro Roy 12.06.2018 21:57

@nemishnigam - токен включен в заголовки запроса?

Castro Roy 13.06.2018 23:10

Нет, раньше не было. Наконец-то я смог заставить его работать. Спасибо Кастро за помощь! :)

nemish nigam 14.06.2018 07:14

При получении токена в getToken используйте ключ как «currrentUser» вместо «ticket».

public getToken() {
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (currentUser) {
    return currentUser.ticket;
    } else return null;
}

Лучше сохранить ключ в какой-то конфигурации, чтобы он был доступен везде, следовательно, не пропал текущий ключ.

Другие вопросы по теме