Я пытаюсь работать с REST API, предоставляемым в моем корпоративном приложении и Angular. Я пытаюсь получить некоторые данные из своего корпоративного приложения. Для этого мне нужно сделать две вещи:
1- Войдите в мое корпоративное приложение через Angular. Для этого уже существует настраиваемый REST API аутентификации, предоставляемый корпоративным приложением. Я пью то же самое. Генерируется токен аутентификации, который я сохраняю в localStorage.
2- Отправьте запрос GET в корпоративное приложение для получения данных после аутентификации. Вот где я сталкиваюсь с проблемами. Я не могу передать токен аутентификации в запросе GET. При проверке того же на вкладке «Приложение» инструментов разработчика Chrome я мог видеть в разделе «Заголовки запроса», что значение авторизации равно нулю. Ниже приведен скриншот того же:
Ниже мой код, который я разработал:
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 { }
При запуске вышеуказанного проекта в консоли отображается результат ниже:
Я не могу понять, почему мой токен не передается с запросом GET.
Привет, Генри, последний снимок экрана сделан из окна консоли, в котором отображается ошибка. проблема в том, что мой запрос GET не может получить токен авторизации. Я успешно генерирую то же самое из запроса POST, но при попытке прикрепить его к запросу GET я получаю несанкционированную ошибку



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы сохраняете токен, используя эту строку
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 не является функцией».
Привет, Кастро, при использовании вышеуказанного решения я теперь получаю два разных токена аутентификации как из моих запросов на размещение, так и на получение. проблема все еще сохраняется
@nemishnigam ты прав, это JSON.parse, исправь.
@nemishnigam Я не понимаю, что вы имеете в виду под «двумя разными токенами аутентификации как из моих запросов на размещение, так и на получение», не могли бы вы уточнить?
@nemishnigam - токен включен в заголовки запроса?
Нет, раньше не было. Наконец-то я смог заставить его работать. Спасибо Кастро за помощь! :)
При получении токена в getToken используйте ключ как «currrentUser» вместо «ticket».
public getToken() {
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser) {
return currentUser.ticket;
} else return null;
}
Лучше сохранить ключ в какой-то конфигурации, чтобы он был доступен везде, следовательно, не пропал текущий ключ.
Добавьте в код несколько операторов журнала, чтобы сузить проблему.