Angular2 Injecting Service into another Service - javascript

I can't find my error.
app.module.ts
...
providers: [ValidateService,AuthService]
...
I do the following in my register.component.ts:
import {AuthService} from '../../services/auth.service';
...
constructor( private _validateService: ValidateService,
private _fms: FlashMessagesService,
private _authService: AuthService,
private _router: Router
) { }
...
ngOnInit() {
this._authService.uniqueUser({username:'zomh'}).subscribe(data => {
console.log("data.success: "+data.success);
if(!data.success) { // Username already exists
console.log('exists');
}
else {
console.log('does not exist');
}
});
}
Works as expected the user is already in the database therefore I get the a user exists in the console.
I do pretty pretty much the very same thing (I broke it down to this point) in my validate.service.ts:
import { AuthService } from './auth.service';
import { Injectable } from '#angular/core';
import { FormControl } from '#angular/forms';
#Injectable()
export class ValidateService {
constructor( public _authService: AuthService) { }
validateRegister(user) {
if(user.name == undefined || user.email == undefined || user.username == undefined || user.password == undefined)
return false;
else
return true;
}
validateEmailPattern(c: FormControl) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(c.value))
return null;
else
return {invalidPattern:true};
}
validateUsernamePattern(c: FormControl) {
const re = /^[A-Za-z0-9]+(?:[ _-][A-Za-z0-9]+)*$/
if (re.test(c.value))
return null;
else
return {invalidPattern:true};
}
validateUsernameIsUnique (c: FormControl) {
let ret:any;
if (c.value.length >= 3)
{
console.log(c.value);
this._authService.uniqueUser({username:'zomh'}).subscribe(data => {
if(!data.success) { // Username already exists
console.log('call from service: exists');
}
else {
console.log('call from service: does not exist');
}
});
}
return {usernameIsTaken:true};
}
}
But here I get a Cannot read property _authService of undefined Exception
For me it looks like the service did not inject correctly. But I can't find my error.
Update 1:
So i did copy the auth Service call into the Constructor and its working. Therefore it has to be some this. related error (?) i can't get the value of this._authService from any other method outside of the constructor ?
#Injectable()
export class ValidateService {
constructor( private _authService: AuthService ) {
this._authService.uniqueUser({ username: 'zomh' }).subscribe(data => {
if (!data.success) { // Username already exists
console.log('call from service: exists');
}
else {
console.log('call from service: does not exist');
}
});
}

I dont think you can have a new line between #Injectable and export class ValidateService {
Try it without that line.

After reading an article I rewrote my method into an instance method:
validateUsernameIsUnique = (c: FormControl) => {
let ret: any;
if (c.value.length >= 3) {
this._authService.uniqueUser({ username: c.value }).subscribe(data => {
if (!data.success) { // Username already exists
console.log('call from service: exists');
}
else {
console.log('call from service: does not exist');
}
});
}
...
It fixed the problem. I am still not sure why this had to be done though, feel free to add knowledge

Related

How to default format response when statusCode is 200 or another successful one in NestJS?

How to format the response when I got successful response?
For example my code is
#Get(':id')
async getOne(#Param('id') id: string) {
const model = await this.categoriesService.getById(id);
if (model) {
return model;
} else {
throw new NotFoundException('Category not found');
}
}
I got a response is:
{
"id": 1,
"name": "test",
"image": null
}
How to default format to?
{ status: 200|201..., data: [MyData] }
There are many ways for this response but in my opinion, is best practice is to use an interceptor
based on documentation
// src/common/interceptors/format-response.interceptor.ts
import { CallHandler, ExecutionContext, Injectable, NestInterceptor, HttpStatus } from '#nestjs/common';
import { map, Observable } from 'rxjs';
#Injectable()
export class FormatResponseInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
return next.handle().pipe(
map(value => {
value = (value) ? value : []
return { status: "success", data: [value]};
}));
}
}
and in the controller inject the interceptor
import { UseInterceptors } from '#nestjs/common';
#UseInterceptors(FormatResponseInterceptor)
export class UserController {
constructor() {}
#Get(':id')
async getOne(#Param('id') id: string) {
const model = await this.categoriesService.getById(id);
if (model) {
return model;
} else {
throw new NotFoundException('Category not found');
}
}
}
And for change the format of error, you can use Filter
I usually just explicitly write
try {
....
return { status: HttpStatus.OK, data: [MyData] }
} catch(e){
return { status: HttpStatus.NOT_FOUND, message: e.message || 'my error' }
}

Why does my angular Interceptor take old value of token from localstorage?

When I login API sends to me the token and token-life-time , when token-life-time is going to be end , I refresh my token by sending request to API and receive new token and new refresh-token-time.
When I refresh or navigate to another page (at the moment when token-life-time is over) my interceptor sends old value of token from LocalStorage and API gives me an error 'Not correct token' when I again refresh or navigate to another page it sends correct token.
But it repeats when the token-life-time is going to be over as described above.
Here is my token-interceptor.service.ts
import { Injectable } from '#angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '#angular/common/http';
import { Observable } from 'rxjs';
import { LoginService } from '../services/login.service';
#Injectable()
export class TokenInterceptorService implements HttpInterceptor {
constructor(
private loginService: LoginService
) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (
this.loginService.isLogged
) {
const token = localStorage.getItem('access-token');
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
request = request.clone({ headers: headers });
}
return next.handle(request);
}
}
It takes token and send request to API.
I have the login.service.ts with login and refresh function .Login function put token value into the LocalStorage and Refresh function refreshes the token in LocalStorage if isNeedToRefresh var is true and it works well.
refresh(): Observable<boolean> {
return this.http.post(`${environment.auth}/refresh`, {
token_hash: localStorage.getItem('refresh-token')
}).pipe(
map((res: any) => {
if (res.access && res.refresh) {
localStorage.setItem('access-token', res.access.hash);
localStorage.setItem('expires-at-access', res.access.expires_at);
localStorage.setItem('refresh-token', res.refresh.hash);
localStorage.setItem('expires-at-refresh', res.refresh.expires_at);
return true;
} else {
this.notificationService.error(res && res.result_descr || '');
return false;
}
}),
catchError(() => of(false))
);
}
Here is where I refresh the token in login.component.ts
ngOnInit() {
if (this.loginService.isLogged) {
if (this.loginService.isNeedToRefresh === true) {
this.loginService.refresh().subscribe((res: boolean) => {
if (res === true) {
this.router.navigate(['']);
}
});
} else if (this.loginService.isNeedToRefresh === false) {
this.router.navigate(['']);
}
}
}
Also I update my token in app.component.ts
ngOnInit() {
$(document).on('click', '[href="#"]', e => e.preventDefault());
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd) {
if (!(val.url.indexOf('/login') === 0)) {
this.authWatcher();
}
}
});
}
authWatcher() {
if (this.loginService.isLogged) {
if (this.loginService.isNeedToRefresh === true) {
this.loginService.refresh().subscribe((refresh: boolean) => {
if (refresh === false) {
this.authModalRef = this.modalService.show(this.staticModal, { backdrop: 'static' });
} else {
this.loginService.checkToken().subscribe((check: boolean) => {
if (!check) {
this.logoutService.logout();
this.router.navigate(['login']);
}
});
}
});
}
}
What's the best way for my interceptor to work well ?
Little update , here is how I check isNeedToRefresh
get isNeedToRefresh(): boolean {
const accessExpireTimestamp = new Date(
localStorage.getItem('expires-at-access')
).getTime();
const refreshExpireTimestamp = new Date(
localStorage.getItem('expires-at-refresh')
).getTime();
const nowTimestamp = new Date().getTime();
if (nowTimestamp >= accessExpireTimestamp) {
if (nowTimestamp >= refreshExpireTimestamp) {
return null; // Refresh token expired
} else {
return true; // Refresh token not expired
}
}
return false;
}
This desicion is worked for me , if someone else would meet such issue
I have fully re-writed my interceptor , basing on this link
import { Injectable } from '#angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '#angular/common/http';
import { LoginService } from '../services/login.service';
import { Observable, BehaviorSubject, Subject } from 'rxjs';
import { switchMap, take, filter } from 'rxjs/operators';
#Injectable()
export class TokenInterceptorService implements HttpInterceptor {
private refreshTokenInProgress = false;
private refreshTokenSubject: Subject<any> = new BehaviorSubject<any>(null);
constructor(public loginService: LoginService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.url.indexOf('refresh') !== -1) {
return next.handle(request);
}
const accessExpired = this.loginService.accessExpired;
const refreshExpired = this.loginService.refreshExpired;
if (accessExpired && refreshExpired) {
return next.handle(request);
}
if (accessExpired && !refreshExpired) {
if (!this.refreshTokenInProgress) {
this.refreshTokenInProgress = true;
this.refreshTokenSubject.next(null);
return this.loginService.refresh().pipe(
switchMap((authResponse) => {
console.log('authResponse ', authResponse)
if (authResponse) {
const token = localStorage.getItem('access-token');
this.refreshTokenInProgress = false;
this.refreshTokenSubject.next(token);
return next.handle(this.injectToken(request));
} else {
return next.handle(request);
}
}),
);
} else {
return this.refreshTokenSubject.pipe(
filter(result => result !== null),
take(1),
switchMap((res) => {
return next.handle(this.injectToken(request))
})
);
}
}
if (!accessExpired) {
return next.handle(this.injectToken(request));
}
}
injectToken(request: HttpRequest<any>) {
const token = localStorage.getItem('access-token');
return request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
}

View is rendered before user type is loaded from firestore

So I'm building an Ionic - Angular app that have an hospital patient submit a request to the nurse stuff and the nurse stuff can see their assigned requests (based on the room that assigned to the patient submitting the request). A nurse can see all requests and a patient can see only his/her requests. I have a function in the auth.service.ts that is called (setUserType() ) once a user is logged in manually or if it is an auto login(token is stored and found) and fetch the user type and name once it finished authentication.
The problem is, in the my-requests.page.ts in NgOnInit I call a function in the requests service that run a query to fetch all requests(if it is a nurse) or to fetch only the user's requests(if it is a patient) based on the user type I assigned once login/auto login occured. This field is unassigned once the my-requests.page.html is rendered and I can't seem to find a way to make it render only after I have the user type information.
setUserType() function:
let userId: string;
this.userIdObservable.subscribe(x => {
userId = x;
});
const userQuery = this.firestore.doc<Users>(`added-users/${userId}`);
userQuery.valueChanges().subscribe(x => {
this._userType = x.type;
this._userName = x.name;
});
My requests ngOnInit function:
ngOnInit() {
this.segment.value = 'progress';
this.requestSubscription = this.requestsService
.loadRequests()
.subscribe(requests => {
this.requestsList = requests;
});
}
Now all the auth functions -
Auth page Authenticate function:
authenticate(email: string, password: string) {
this.isLoading = true;
this.loadingCtrl
.create({
keyboardClose: true,
message: 'Logging in...'
})
.then(loadingEl => {
loadingEl.present();
let authObs: Observable<AuthResponseData>;
if (this.isLogin) {
authObs = this.authService.login(email, password);
} else {
authObs = this.authService.signup(email, password);
}
authObs.subscribe(resData => {
console.log(resData);
this.isLoading = false;
loadingEl.dismiss();
this.authService.setUserType();
this.router.navigateByUrl('/requests/tabs/add-requests');
}, errRes => {
loadingEl.dismiss();
const code = errRes.error.error.message;
let message = 'Could not sign you up, please try again.';
if (code === 'EMAIL_EXISTS') {
message = 'This Id exists already!';
} else if (code === 'EMAIL_NOT_FOUND') {
message = 'No such user.';
} else if (code === 'INVALID_PASSWORD') {
message = 'Could not log you in, please try again.';
}
this.showAlert(message);
});
});
}
Auth service login function:
login(email: string, password: string) {
return this.http
.post<AuthResponseData>(
`https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=${
environment.firebaseAPIKey
}`,
{ email: email, password: password, returnSecureToken: true }
)
.pipe(tap(this.setUserData.bind(this)));
}
Auth service autologin function:
autoLogin() {
return from(Plugins.Storage.get({ key: 'authData' })).pipe(
map(storedData => {
if (!storedData || !storedData.value) {
return null;
}
const parsedData = JSON.parse(storedData.value) as {
token: string;
tokenExpirationDate: string;
userId: string;
email: string;
};
const expirationTime = new Date(parsedData.tokenExpirationDate);
if (expirationTime <= new Date()) {
return null;
}
const user = new User(
parsedData.userId,
parsedData.email,
parsedData.token,
expirationTime
);
return user;
}),
tap(user => {
if (user) {
this._user.next(user);
this.setUserType();
}
}),
map(user => {
return !!user;
})
);
}
This is how you can do you dont have to include it in any module cli will do that for you.
import {Component, Injectable, OnInit} from '#angular/core';
import {BehaviorSubject} from 'rxjs';
import {FormGroup} from '#angular/forms';
#Injectable({
providedIn: 'root'
})
export class UserStateService {
private user = new BehaviorSubject({
isLoggedIn: false,
userType: null
});
constructor() {
}
setUser(user) {
this.user.next(user);
}
getUser() {
return this.user;
}
}
// my request
#Component({
selector: 'request-component',
templateUrl: './request-component.html'
})
export class RequestComponent implements OnInit {
constructor(private userStateService: UserStateService) {}
ngOnInit(): void {
this.userStateService
.getUser()
.subscribe(
((val: {isLoggedIn: boolean, userType: any}) => {
// calll you service
}));
}
}
// in your auto login or login you call setter
this.userStateService.setUser({isLoggedIn: true, userType: 'data from login'});

Cannot Dismiss LoadingController In Error Response Of Subscribe() - Ionic 4

I'm displaying a LoadingController when the user tries to login. Meanwhile, an API is being called.
I’m able to dismiss the LoadingController when I get a SUCCESS response from subscribe, but when I get an ERROR response, I’m not able to dismiss. Please help!
I’m a professional Python developer and a total newbie to Ionic, just started a day ago. So, please assist as such.
import { Component, OnInit } from '#angular/core';
import { ToastController, LoadingController } from '#ionic/angular';
import { CallapiService } from '../callapi.service';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
userEmail = '';
userPassword = '';
loginUrl = 'login/';
loginMethod = 'POST';
postBody = {};
constructor(
public toastController: ToastController,
public loadingController: LoadingController,
private callApiService: CallapiService,
) { }
ngOnInit() {
}
async presentToast(displayMessage) {
const toast = await this.toastController.create({
message: displayMessage,
duration: 2000,
position: 'middle',
});
return await toast.present();
}
async presentLoading(loadingMessage) {
const loading = await this.loadingController.create({
message: loadingMessage,
});
return await loading.present();
}
loginUser() {
if (this.userEmail === '' || this.userPassword === '') {
this.presentToast('Email and password are required.');
}
else {
this.presentLoading('Processing...');
this.postBody = {
email: this.userEmail,
password: this.userPassword,
};
this.callApiService.callApi(this.loginUrl, this.postBody, this.loginMethod).subscribe(
(success) => {
console.log(success);
this.loadingController.dismiss();
},
(error) => {
console.log(error);
this.loadingController.dismiss();
}
);
this.loadingController.dismiss();
}
}
}
Without any service,
Same issue I faced while using Ionic 4 loading controller.
After trial and error I got working solution.
As loading controller functions are using async and await because both are asynchronous functions.
dismiss() function will called before present() function because, dismiss function will not wait until creating and presenting the loader, it will fire before present() as soon function will call.
Below is working code,
loading:HTMLIonLoadingElement;
constructor(public loadingController: LoadingController){}
presentLoading() {
if (this.loading) {
this.loading.dismiss();
}
return new Promise((resolve)=>{
resolve(this.loadingController.create({
message: 'Please wait...'
}));
})
}
async dismissLoading(): Promise<void> {
if (this.loading) {
this.loading.dismiss();
}
}
someFunction(){
this.presentLoading().then((loadRes:any)=>{
this.loading = loadRes
this.loading.present()
someTask(api call).then((res:any)=>{
this.dismissLoading();
})
})
}
this.callApiService.callApi(this.loginUrl, this.postBody, this.loginMethod)
.subscribe(
(data) => {
// Called when success
},
(error) => {
// Called when error
},
() => {
// Called when operation is complete (both success and error)
this.loadingController.dismiss();
});
Source: https://stackoverflow.com/a/54115530/5442966
Use Angular property binding. Create a component to your loading:
import { Component, Input } from '#angular/core';
import { LoadingController } from '#ionic/angular';
#Component({
selector: 'app-loading',
template: ''
})
export class LoadingComponent {
private loadingSpinner: HTMLIonLoadingElement;
#Input()
set show(show: boolean) {
if (show) {
this.loadingController.create().then(loadingElem => {
this.loadingSpinner = loadingElem;
this.loadingSpinner.present();
});
} else {
if (this.loadingSpinner) {
this.loadingSpinner.dismiss();
}
}
}
constructor(private loadingController: LoadingController) {}
}
...then in 'login.page.html' use your componente:
...
<app-loading [show]="showLoading"></app-loading>
... in 'LoginPage' create a property 'showLoading' and set it to true or false where you whant:
//.... some source code
export class LoginPage implements OnInit {
showLoading;
userEmail = '';
userPassword = '';
loginUrl = 'login/';
loginMethod = 'POST';
postBody = {};
//.... some source code
loginUser() {
if (this.userEmail === '' || this.userPassword === '') {
this.presentToast('Email and password are required.');
} else {
this.showLoading = true;
this.postBody = {
email: this.userEmail,
password: this.userPassword
};
this.callApiService
.callApi(this.loginUrl, this.postBody, this.loginMethod)
.subscribe(
success => {
console.log(success);
this.showLoading = false;
},
error => {
console.log(error);
this.showLoading = false;
}
);
this.showLoading = false;
}
}
}
This works for me, I reuse the loading component on others pages!
Recommended reading: https://angular.io/start
I actually ran into this exact issue and for me the answer was just to use await.
The functions for both creating and dismissing loaders return promises. What I realized was happening is that the subscribe/promise rejection was halting all other promises from completing. Now, I just await both presenting and dismissing and I have no issue:
async getData() {
//await presenting
await this.presentLoading('Loading...');
try {
let response = await this.httpService.getData();
await this.loadingController.dismiss();
//...
catch(err) {
this.loadingController.dismiss();
//handle error
//...
}
}
async presentLoading(msg: string) {
const loading = await this.loadingController.create({
spinner: 'crescent',
message: msg
});
await loading.present();
}
I hope this simple solution helps!

Global Error Handler in angular 4

Here's I have attached my code. I have implemented global handler and now I need to extract 'dashboard' from 500 Error on zone.js. How can I get it in the global Handler. Is there any way that I can get my desired output?
import { ErrorHandler, Injectable, Injector, NgZone } from '#angular/core';
import { LocationStrategy, PathLocationStrategy } from '#angular/common';
import { LogService } from './logging-service.service';
import * as StackTrace from 'stacktrace-js';
#Injectable()
export class GlobalErrorHandler implements ErrorHandler {
private errors = new Array<any>();
constructor(public injector: Injector, public zone: NgZone) {
}
public handleError(error: any) {
console.log('Im a global handler', JSON.parse(error));
const logService = this.injector.get(LogService);
const location = this.injector.get(LocationStrategy);
const message = error.message ? error.message : error.toString();
const url = location instanceof PathLocationStrategy
? location.path() : '';
const callbackFun = function (stackframes) {
const stringifiedStack = stackframes.map(function (sf) {
return sf.toString();
}).join('\n');
console.log(stringifiedStack);
};
const errback = function (err) {
console.log(err);
console.log(err.stack);
};
window.onerror = function (msg, file, line, col, error) {
// this.zone.fromError.subscribe(this.onZoneError);
StackTrace.fromError(message).then(callbackFun).catch(errback);
StackTrace.get().then(callbackFun).catch(message);
};
const handleErrorData = {
// Some Json to send to server
};
logService.logError(handleErrorData);
throw error;
}
public onZoneError(error) {
console.log(error);
console.error('Error', error instanceof Error ? error.message : error.toString());
}
}
Implement an HttpInterceptor (requires Angular 4.3.x)
From there listen to errors and extract the request url and split it into its parts.

Categories