Token-based Authentication in Angular 6 with ASP.NET Core 2.1

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthenticationService {
 constructor(private http: HttpClient) { }

 login(username: string, password: string) {
 return this.http.post<any>('/api/login', { username, password })
 .pipe(map(user => {
 // login successful if there's a jwt token in the response
 if (user && user.token) {
 // store user details and jwt token in local storage to keep user logged in between page refreshes
 localStorage.setItem('TokenInfo', JSON.stringify(user));
 }

 return user;
 }));
 }

 logout() {
 // remove user from local storage to log user out
 localStorage.removeItem('TokenInfo');
 }
}

 <h2>Login</h2>
 <form [formGroup]="loginForm" (ngSubmit)="onLogin()">
 <div class="form-group">
 <label for="username">Username</label>
 <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && formData.username.errors }" />
 <div *ngIf="submitted && formData.username.errors" class="invalid-feedback">
 <div *ngIf="formData.username.errors.required">Username is required</div>
 </div>
 </div>
 <div class="form-group">
 <label for="password">Password</label>
 <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && formData.password.errors }" />
 <div *ngIf="submitted && formData.password.errors" class="invalid-feedback">
 <div *ngIf="formData.password.errors.required">Password is required</div>
 </div>
 </div>
 <div class="form-group">
 <button [disabled]="submitClick" class="btn btn-primary">Login</button>
 </div>
 <div *ngIf="error" class="alert alert-danger">{{error}}</div>
 </form>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AuthenticationService } from '../Services/authentication.service'; 

@Component({
 templateUrl: 'login.html'
})
export class LoginComponent implements OnInit {

 loginForm: FormGroup;
 submitClick = false;
 submitted = false;
 returnUrl: string;
 error = '';

 constructor(
 private formBuilder: FormBuilder,
 private route: ActivatedRoute,
 private router: Router,
 private authenticationService: AuthenticationService) { }

 ngOnInit() {
 this.loginForm = this.formBuilder.group({
 username: ['', Validators.required],
 password: ['', Validators.required]
 });

 // reset login status
 this.authenticationService.logout();

 // get return url from route parameters or default to '/'
 this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
 }

 // convenience getter for easy access to form fields
 get formData() { return this.loginForm.controls; }

 onLogin() {
 this.submitted = true;

 // stop here if form is invalid
 if (this.loginForm.invalid) {
 return;
 }

 this.submitClick = true;
 this.authenticationService.login(this.formData.username.value, this.formData.password.value)
 .pipe(first())
 .subscribe(
 data => {
 this.router.navigate([this.returnUrl]);
 },
 error => {
 this.error = error;
 this.submitClick = false;
 });
 }
}

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthorizationCheck implements CanActivate {

 constructor(private router: Router) { }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
 //If token data exist, user may login to application
 if (localStorage.getItem('TokenInfo')) {
 return true;
 }

 // otherwise redirect to login page with the return url
 this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
 return false;
 }
}

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

@Injectable()
export class httpInterceptor implements HttpInterceptor {
 intercept(request: HttpRequest<any>, newRequest: HttpHandler): Observable<HttpEvent<any>> {
 // add authorization header to request

 //Get Token data from local storage
 let tokenInfo = JSON.parse(localStorage.getItem('TokenInfo'));

 if (tokenInfo && tokenInfo.token) {
 request = request.clone({
 setHeaders: {
 Authorization: `Bearer ${tokenInfo.token}`,
 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 }
 });
 }

 return newRequest.handle(request);
 }
}

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

import { AuthenticationService } from '../Services/authentication.service';
import { Router } from '@angular/router';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
 constructor(private authenticationService: AuthenticationService, private router: Router) { }

 intercept(request: HttpRequest<any>, newRequest: HttpHandler): Observable<HttpEvent<any>> {

 return newRequest.handle(request).pipe(catchError(err =>{
 if (err.status === 401) {
 //if 401 response returned from api, logout from application & redirect to login page.
 this.authenticationService.logout();
 }

 const error = err.error.message || err.statusText;
 return Observable.throw(error);
 }));
 }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';

import { LoginComponent } from './Login/login.component'

import { httpInterceptor } from './Interceptor/httpInterceptor';
import { ErrorInterceptor } from './Interceptor/errorInterceptor';

import { AuthorizationCheck } from './Services/authorizationCheck'
import { AuthenticationService } from './Services/authentication.service'

@NgModule({
 declarations: [
 AppComponent,
 NavMenuComponent,
 HomeComponent,
 CounterComponent,
 FetchDataComponent,
 LoginComponent
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule,
 ReactiveFormsModule,
 RouterModule.forRoot([
 { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthorizationCheck] },
 { path: 'counter', component: CounterComponent, canActivate: [AuthorizationCheck] },
 { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizationCheck] },
 { path: 'login', component: LoginComponent }
 ])
 ],
 providers: [
 { provide: HTTP_INTERCEPTORS, useClass: httpInterceptor, multi: true },
 { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
 AuthorizationCheck, AuthenticationService],
 bootstrap: [AppComponent]
})
export class AppModule { }