I am new to Angular and I am trying to implement api call which send token in header on all api so I am using Interceptor.
I am not able to set header in request.
jwt.interceptor.ts
import { Injectable } from '#angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let currentUser = localStorage.getItem('useremail')
let currentUserToken = localStorage.getItem('token')
if (currentUser && currentUserToken) {
request = request.clone({
setHeaders: {
'Authorization': `${currentUserToken}`
}
});
}
// console.log("Request", request)
return next.handle(request);
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { AppUserListingComponent } from './app-user-listing/app-user-listing.component';
import { JwtInterceptor } from './jwt.interceptor';
#NgModule({
providers: [ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true } ],
bootstrap: [AppComponent]
})
export class AppModule { }
user-listing.service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { map } from 'rxjs/operators';
#Injectable({
providedIn: 'root'
})
export class UserListingService {
apiUrl = "URL";
constructor(
private http: HttpClient
) { }
fetchAllUsers() {
return this.http.get(`${this.apiUrl}/fetchAdminsUsers`)
}
}
What is the reason my code is not working ?
Thanks in advance
In your app.module.ts code there's no import: [HttpClientModule] Do you have imported the HttpClientModule?
I'm experiencing a similar issue with angular 8.x http interceptor is not working OK.
Add imports: [BrowserModule, HttpClientModule] in #NgModule.
Authorization is a special header, you need to add withCredentials: true to the request to add it.
request = request.clone({
setHeaders: {
'Authorization': `${currentUserToken}`
},
withCredentials: true
});
try using instance of like below.
return next.handle(request).pipe(
tap(
event => {
if(event instanceof HttpResponse){
//api call success
console.log('success in calling API : ', event);
}
},
error => {
if(event instanceof HttpResponse){
//api call error
console.log('error in calling API : ', event);
}
}
)
)
Related
I followed the controller-service-repository architecture and I want to use dependency inversion on StoneRepository. Having the code from bellow I get:
[Nest] 22656 - 03/21/2022, 5:01:44 PM ERROR [ExceptionsHandler] this.stoneRepository.getStones is not a function
What have I done wrong?
Please help.
constants.ts
export const STONE_REPOSITORY_TOKEN = Symbol("STONE_REPOSITORY_TOKEN");
app.module.ts
import { Module } from "#nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { StoneModule } from "./stone/stone.module";
#Module({
imports: [StoneModule],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
stone.module.ts
import { Module } from "#nestjs/common";
import { StoneController } from "./stone.controller";
import { StoneService } from "./stone.service";
import { StoneRepository } from "./stone.repository";
import { STONE_REPOSITORY_TOKEN } from "./constants";
#Module({
imports: [],
controllers: [StoneController],
providers: [
{
provide: STONE_REPOSITORY_TOKEN,
useValue: StoneRepository,
},
StoneService,
],
})
export class StoneModule {}
stone.controller.ts
import { Controller, Get } from "#nestjs/common";
import { StoneService } from "./stone.service";
import { Stone } from "./domain/Stone";
#Controller()
export class StoneController {
constructor(private stoneService: StoneService) {}
#Get("/stone")
async getStones(): Promise<Stone[]> {
return await this.stoneService.getStones();
}
}
stone.interface.repository.ts
import { Stone } from "./domain/Stone";
export interface StoneInterfaceRepository {
getStones(): Promise<Stone[]>;
}
stone.service.ts
import { Inject, Injectable } from "#nestjs/common";
import { StoneInterfaceRepository } from "./stone.interface.repository";
import { Stone } from "./domain/Stone";
import { STONE_REPOSITORY_TOKEN } from "./constants";
#Injectable()
export class StoneService {
constructor(
#Inject(STONE_REPOSITORY_TOKEN)
private stoneRepository: StoneInterfaceRepository,
) {}
async getStones(): Promise<Stone[]> {
return await this.stoneRepository.getStones();
}
}
stone.repository.ts
import { Injectable } from "#nestjs/common";
import { StoneInterfaceRepository } from "./stone.interface.repository";
import { Stone } from "./domain/Stone";
#Injectable()
export class StoneRepository implements StoneInterfaceRepository {
async getStones(): Promise<Stone[]> {
return Promise.resolve([new Stone()]);
}
}
You are using useValue for the STONE_REPOSITORY_TOKEN token's custom provider. This means that Nest will inject the direct reference, not the class instance, so you have no access to instance methods, like getStones(). Change your module to this:
#Module({
imports: [],
controllers: [StoneController],
providers: [
{
provide: STONE_REPOSITORY_TOKEN,
useClass: StoneRepository,
},
StoneService,
],
})
export class StoneModule {}
I am trying to create a toast using Material Snackbar from a custom class.
I am getting an error in my custom class ( Unable to find open from undefined. ) but working fine in user.service.ts
If ngZone is used, then i am getting an error, (unable to find run from undefined)
Note: In ErrorHandler Class
console.log(this.snackBar) // gives undefined
app.module.ts
providers: [ErrorHandler],
bootstrap: [AppComponent]
})
export class AppModule { }
User Service
import { Injectable } from '#angular/core';
import { HttpClient, HttpErrorResponse } from '#angular/common/http';
import { catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { ErrorHandler } from '../classes/error-handler';
import {MatSnackBar} from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class UserService {
private url = environment.api+'/login';
constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }
login(credentials){
this.sb.open("hello world"); // Working Fine
return this.http.post(this.url, {})
.pipe(
catchError(this.eh.handleError)
);
}
}
Error Handler Class
import {Component, Injectable, NgZone} from '#angular/core';
import { HttpErrorResponse } from '#angular/common/http';
import { throwError } from 'rxjs';
import * as _ from 'lodash';
import {MatSnackBar} from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class ErrorHandler {
constructor (private snackBar: MatSnackBar) {}
public handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error("Error code working")
console.log(this.snackBar) // gives undefined
this.snackBar.open("Hello world"); // Throwing Error
}
// return an observable with a user-facing error message
return throwError('Something bad happened; please try again later.');
};
}
Thanks to all. I fixed it. Unfortunately i missed the stackoverflow link.
Change in
catchError((res) => this.eh.handleError(res))
did the trick
UserService
import { Injectable } from '#angular/core';
import { HttpClient, HttpErrorResponse } from '#angular/common/http';
import { catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { ErrorHandler } from '../classes/error-handler';
import {MatSnackBar} from '#angular/material';
#Injectable({
providedIn: 'root'
})
export class UserService {
private url = environment.api+'/login';
constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }
login(credentials){
this.sb.open("hello world"); // Working Fine
return this.http.post(this.url, {})
.pipe(
catchError((res) => this.eh.handleError(res)) // change in this line
);
}
}
I stumbled upon the same issue in my application a few days ago. The reason is the context of this.
In
This.sb.open("hello world"); // Working Fine
the context of this is the UserService class. While in
this.snackBar.open("Hello world"); // Throwing Error
the context of this changed. Probably to CatchSubscriber.
You already mentioned that:
catchError((res) => this.eh.handleError(res)) // change in this line
resolves the error. Because it changed the context of this back to the UserService class. An alternative solution is to use the arrow syntax for the whole login():
login = (credentials) => {
// your code goes here
}
Taking again the tutorial of the site Angular, I created in winamp a database with a table including a field {"id": id, "name": name} and I make 2 queries on this table with Symfony4:
1) A request to list heroes.
2) A request to create hero.
Executed from Angular 7, the query 1) works perfectly (route / listerHeroes).
Executed from Angular 7, query 2) does not work, it returns error 405 (route / ajouterHero). However launched from Postman, this query works.
I can not find any documentation to explain to me this bug on which I stumble for several days. A track please
Below copy of both classes: heroes.service.ts and component3.component.ts
// heroes.service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { HttpErrorHandler, HandleError } from './http-error-handler.service';
import { Hero } from '../assets/Structure';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
#Injectable({ providedIn: 'root' })
export class HeroesService {
heroesUrl = 'http://heroes/';
private handleError: HandleError;
constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
this.handleError = httpErrorHandler.createHandleError('HeroesService');
}
getHeroes$(): Observable<Hero[]> {
return this.http.get<Hero[]>(`${this.heroesUrl}listerHeroes`, httpOptions);
}
addHero(hero: Hero): Observable<Hero> {
return this.http
.post<Hero>(`${this.heroesUrl}ajouterHero`, hero, httpOptions)
.pipe(catchError(this.handleError('addHero', hero)));
}
}
// component3.component.ts
import { Component, OnInit } from '#angular/core';
import { HeroesService } from '../heroes.service';
import { Hero } from '../../assets/Structure';
#Component({
selector: 'app-component3',
templateUrl: './component3.component.html',
styleUrls: ['./component3.component.css']
})
export class Component3Component implements OnInit {
heroes: Hero[];
editHero: Hero;
constructor(private heroesService: HeroesService) {}
ngOnInit() {
this.heroesService.getHeroes$().subscribe(res => (this.heroes = res));
}
addHero(name: string): void {
name = name.trim();
console.log('FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF C3A name =', name);
if (!name) {
return;
}
const newHero: Hero = { 'id': 0, 'name': name } as Hero;
this.heroesService.addHero(newHero).subscribe(hero => {
console.log('GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG C3B hero= ', hero);
this.heroes.push(hero);
});
}
}
I found the solution:
The blocking was listed backend (Symfony4) which refused the pre-query OPTIONS. It was necessary to install and configure the bundle nelmio (https://github.com/nelmio/NelmioApiDocBundle) which allows the smooth running of the request.
Hi I'm trying to write a simple Angular 6 interceptor that adds the jwt token to the header when sending requests.
The problem is that the header in the request arrives NULL on the backend, so of course I can't get the authorization token and I'm having trouble figuring out why.
I'm pretty sure the problem is in my js code because if I try to send the same request via any REST client I can see the header in my Java code just fine.
Here's my js code:
import { Component, OnInit } from '#angular/core';
import {Observable} from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { UserService } from './user.service';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
constructor(private http: HttpClient, private userService: UserService) { }
ngOnInit() {
this.userService.getAllUsers().subscribe(
data => {
console.log(data);
/* this.users_from_db=data; */
},
err => {
console.log(err);
}
);
}
users_from_db: Observable<any>;
}
import {Injectable} from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import {Observable} from 'rxjs/Observable';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
#Injectable()
export class UserService {
constructor(private http: HttpClient) {}
public getAllUsers(): Observable<any> {
return this.http.get<any>('http://localhost:8080/users/get-all');
}
}
import { Injectable } from '#angular/core';
import {HttpInterceptor, HttpRequest, HttpHandler, HttpSentEvent, HttpHeaderResponse, HttpProgressEvent,
HttpResponse, HttpUserEvent, HttpErrorResponse} from '#angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '#angular/router';
import {TokenStorage} from './token.storage';
import 'rxjs/add/operator/do';
const TOKEN_HEADER_KEY = 'Authorization';
#Injectable()
export class Interceptor implements HttpInterceptor {
constructor(private token: TokenStorage, private router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
let authReq = req;
if (this.token.getToken() != null) {
console.log("authorizing...");
authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + this.token.getToken())});
console.log(authReq);
}
if (!authReq.headers.has('Content-Type')) {
authReq = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
}
return next.handle(authReq).do(
(err: any) => {
if (err instanceof HttpErrorResponse) {
console.log(err);
console.log('req url :: ' + req.url);
if (err.status === 401) {
this.router.navigate(['login']);
}
}
}
);
}
}
The value of the token is surely there when I do this.token.getToken()in the intercept function. I checked by printing the value in the browser console.
Any help is appreciated, thanks.
This is my interceptor:
import { Injectable } from "#angular/core";
import { HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse, HttpInterceptor } from "#angular/common/http";
import { Observable, BehaviorSubject, throwError } from "rxjs";
import { catchError, map, filter, take, switchMap, finalize } from "rxjs/operators";
import { AppConsts } from "../consts";
#Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(this.addTokenToRequest(request)).pipe(
map(res => res),
catchError(err => {
if (err instanceof HttpErrorResponse && err.status === 401 && err.headers.has("Token-Expired")) {
// here code to refresh token if needed
} else {
return throwError(err);
}
})
);
}
private addTokenToRequest(request: HttpRequest<any>, token: string = null): HttpRequest<any> {
if (token) {
request = request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
}
else {
const currentUser = JSON.parse(localStorage.getItem(AppConsts.DEFAULT_USER_STORAGE_NAME));
if (currentUser && currentUser.token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${currentUser.token}`
}
});
}
}
return request;
}
}
You also can see a simple example - http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial
I have an Ionic 3 application that calls a Spring Boot API to login into Mobile App,My Spring Boot application is hosted in Aws.It works on android But it doesn't work on ios ,It Says Cross Issue I tried Many Solutions from internet But did not get the result.
The error I am getting is
response with status: 0 for url : null
this is my working spring boot controller
#CrossOrigin
#RestController
#RequestMapping("/api/customerr")
public class loginController extends NamedParameterJdbcDaoSupportClass{
#Autowired
LoginService loginService;
#Autowired
LoginValidation loginValidation;
#RequestMapping(value="/getUser", method = RequestMethod.POST)
public Response getUsers( #RequestBody UserRequest userRequest ) throws Exception {
List<User> users = null;
try {
loginValidation.getUsers(userRequest.getSsoid(), userRequest.getPassword() );
} catch (ValidationExceptions ex) {
ex.printStackTrace();
return new Response("400", ex.getMessage());
}
try {
users = loginService.getUsers(userRequest.getSsoid(),userRequest.getPassword() );
} catch (Exception ex) {
return new Response("400", ex.getMessage());
}
for(User u: users )
{
if(u.getStatus().getStatusId() == 2)
{
return new Response("300", u.getSsoid());
}
}
return new Response("200", users);
}
}
this is my ionic provider/service
import { Http, Response} from '#angular/http';
import { Injectable } from '#angular/core';
#Injectable()
export class loginService {
data:any;
constructor(public http : Http){}
getAllUsers(authData){
alert("api users")
return new Promise(resolve=>{
this.http.post('http://someAddress:8080/api/customerr/getUser', authData)
.map(res=>res.json())
.subscribe(data=>{
this.data=data;
resolve(this.data)
})
})
}
}
This is the login page where I am calling the api
import { Component, ViewChild } from '#angular/core';
import { Alert,AlertController,IonicPage,Loading,LoadingController,NavController,MenuController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, NgForm } from '#angular/forms';
import { EmailValidator } from '../../validators/email';
import { CustomerPage } from '../customer/customer';
import { loginService } from '../../providers/loginservice/login.servie';
import {Response} from '#angular/http';
import { ToastController } from 'ionic-angular';
import { CustomerdetailsPage } from '../customerdetails/customerdetails';
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
#ViewChild('f') loginForm: NgForm;
loginResponse:any;
constructor(
public navCtrl: NavController,
public loadingCtrl: LoadingController,
public alertCtrl: AlertController,
public menu:MenuController,
private loginservice : loginService,
private toastCtrl: ToastController
){
}
ionViewWillEnter(){
this.menu.enable(false)
}
ionViewWillLeave(){
this.menu.enable(true)
}
loginUser() {
console.log("login data");
console.log(this.loginForm.value);
this.loginservice.getAllUsers(this.loginForm.value).then(
(data:any) =>
{
this.loginResponse = data.json();
alert("data");
alert(this.loginResponse.code);
if(this.loginResponse.code === '200')
{
if(this.loginResponse.data.length !== 0)
{
let key1 = 'islogIn';
localStorage.setItem(key1, "true");
this.navCtrl.setRoot(CustomerPage);
}
else if(this.loginResponse.data.length == 0)
{
let toast = this.toastCtrl.create({
message: 'invalid username or password',
duration: 3000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}
else if (this.loginResponse.code === '300')
{
let toast = this.toastCtrl.create({
message: 'user is deactivated',
duration: 3000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
},
(error)=>{
alert(error);
}
);
}
}
And this the app.module.ts
#NgModule({
declarations: [
..
LoginPage,
...
],
imports: [
BrowserModule,
HttpClientModule,
HttpModule,
IonicStorageModule.forRoot(),
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
.
.
LoginPage,
.
.
],
providers: [
Network,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Storage,
SocialSharing,
File,
FileOpener,
DatabaseProvider,
SQLitePorter,
SQLite,
GlobalProvider,
PageserviceProvider,
loginService,
syncService
]
})
export class AppModule {}
Please Use Native HTTP API for IOS
https://ionicframework.com/docs/native/http/