Using a single auth service

Author: Bernardo

src/app/authentication/authentication.module.ts

@@ -2,15 +2,13 @@ import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { AuthenticationInterceptor } from './interceptor/authentication.interceptor';
-import { AuthenticationService } from './service/authentication.service';
 
 @NgModule({
   declarations: [],
   imports: [
     CommonModule
   ],
   providers: [
-    AuthenticationService,
     { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true }
   ]
 })

src/app/authentication/guard/authenticated.guard.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 import { AuthenticationService } from '../service/authentication.service';
 
 @Injectable({
@@ -14,7 +13,7 @@ export class AuthenticatedGuard implements CanActivate {
   ) { }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    const user = this.authenticationService.userValue;
+    const user = this.authenticationService.getUser().token;
     if (user) {
       // logged in so return true
       return true;

src/app/authentication/interceptor/authentication.interceptor.ts

@@ -14,7 +14,7 @@ export class AuthenticationInterceptor implements HttpInterceptor {
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     let authReq;
 
-    const token = this.authenticationService.getToken();
+    const token = this.authenticationService.getUser().token;
 
     if (token === null) {
       authReq = request;

src/app/authentication/model/user.ts

@@ -2,4 +2,5 @@ export class User {
     username: string = '';
     password: string = '';
     logged: boolean = false;
+    token: string | null = null;
 }

src/app/authentication/service/authentication.service.ts

@@ -1,14 +1,46 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { environment } from '@environments/environment';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { User } from '../model/user';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root',
+})
 export class AuthenticationService {
 
-    private tokenId: string = 'access_token';
-
-    constructor() { }
+    public user: User = new User();
+    
+    constructor(
+      private http: HttpClient
+    ) { }
+  
+    login(username: string, password: string): Observable<User> {
+      return this.http.post<User>(`${environment.apiUrl}/auth/login/`, { username, password })
+        .pipe(map(user => {
+          let loggedUser;
+  
+          if (user) {
+            loggedUser = user;
+            const token = window.btoa(username + ':' + password);
+            loggedUser.logged = true;
+            loggedUser.token = token;
+          } else {
+            loggedUser = new User();
+          }
+  
+          this.user = loggedUser;
+          return this.user;
+        }));
+    }
+  
+    logout() {
+      this.user = new User();
+    }
 
-    getToken(): string | null {
-        return localStorage.getItem(this.tokenId);
+    getUser(): User {
+        return this.user;
     }
 
 }

src/app/login/login-form/login-form.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { LoginService } from '../service/login.service';
+import { AuthenticationService } from '@app/authentication/service/authentication.service';
 
 @Component({
-  selector: 'login-form',
+  selector: 'dahs-login-form',
   templateUrl: './login-form.component.html',
   styleUrls: ['./login-form.component.sass']
 })
@@ -20,10 +20,10 @@ export class LoginFormComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private loginService: LoginService
+    private authenticationService: AuthenticationService
   ) {
     // redirect to home if already logged in
-    if (this.loginService.user.logged) {
+    if (this.authenticationService.getUser().logged) {
       this.router.navigate(['/']);
     }
 
@@ -50,7 +50,7 @@ export class LoginFormComponent implements OnInit {
     }
 
     this.loading = true;
-    this.loginService.login(this.f['username'].value, this.f['password'].value)
+    this.authenticationService.login(this.f['username'].value, this.f['password'].value)
       .subscribe({
         next: user => {
           this.loading = false;

src/app/login/login.module.ts

@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthenticationModule } from '@app/authentication/authentication.module';
 import { LoginFormComponent } from './login-form/login-form.component';
 import { LoginRoutingModule } from './login-routing.module';
-import { LoginService } from './service/login.service';
 import { LogoutButtonComponent } from './logout-button/logout-button.component';
 
 
@@ -21,9 +20,6 @@ import { LogoutButtonComponent } from './logout-button/logout-button.component';
     FormsModule,
     ReactiveFormsModule
   ],
-  providers: [
-    LoginService
-  ],
   exports: [
     LogoutButtonComponent
   ]

src/app/login/logout-button/logout-button.component.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { LoginService } from '../service/login.service';
+import { AuthenticationService } from '@app/authentication/service/authentication.service';
 
 @Component({
-  selector: 'logout-button',
+  selector: 'dahs-logout-button',
   templateUrl: './logout-button.component.html',
   styleUrls: ['./logout-button.component.css']
 })
 export class LogoutButtonComponent {
 
-  constructor(private loginService: LoginService) { }
+  constructor(private authenticationService: AuthenticationService) { }
 
   logout(){
-    this.loginService.logout();
+    this.authenticationService.logout();
   }
 
 }