Menggunakan Authentication Pada Project Buku Resep – 8

Pada modul ini kita akan mulai menggunakan data user authentication untuk mengatur tampilan dan routing.

Anda dapat melakukannya pada file service atau pada file component. Pada tutorial digunakan pada file component.

Buka file auth.component.ts, lalu modifikasi seperti berikut:

• Inject router pada class.
• Tambahkan redirect navigasi untuk user yang berhasil login atau signup ke halaman recipes.

import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";
import { Router } from "@angular/router";
import { Observable } from "rxjs";
import { AuthService, AuthResponse } from "./auth.service";

@Component({
    selector : 'app-auth',
    templateUrl : './auth.component.html'
})
export class AuthComponent{
    isLoginMode = true;
    isLoading = false;
    errorMsg = '';

    //inject router
    constructor(private authSrv : AuthService, private router: Router){}

    onSwitchMode(){
        this.isLoginMode = !this.isLoginMode; 
    }

    onSubmit(form : NgForm){
        if (form.invalid){
            return;
        }
        const email = form.value.email;
        const pswrd = form.value.password;

        this.isLoading = true;
        this.errorMsg = '';

        let authObs : Observable<AuthResponse>

        if(this.isLoginMode){
            authObs = this.authSrv.login(email, pswrd)
        }else{
            authObs = this.authSrv.signUp(email, pswrd)
        }

        authObs.subscribe(respData =>{
            this.isLoading = false;
            //navigasi ke halamaan recipes jika login atau signup berhasil
            this.router.navigate(['/recipes']);
            }, 
            errMsg =>{
                this.errorMsg = errMsg;
                this.isLoading = false;
            }
        );

        form.reset()
    }
}

Kemudian buka file header.component.ts, tambahkan subscribe untuk mengetahui data user

import { Component, OnDestroy, OnInit } from "@angular/core";
import { Subscription } from "rxjs";
import { AuthService } from "../auth/auth.service";
import { DataStorageService } from "../shared/data-storage.service";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
})

//implement oninit dan ondestroy
export class HeaderComponent implements OnInit, OnDestroy{
    //property untuk status authenticated user
    isAuthenticated = false;
    private userSub! : Subscription;

    //inject authservice
    constructor(private dataStorageSrv : DataStorageService, private authSrv : AuthService){}

    //subscribe data user
    ngOnInit(): void {
        this.userSub =  this.authSrv.user.subscribe(user=>{
            this.isAuthenticated = !user ? false : true;
            //this.isAuthenticated = !!user;
        });
    }

    //destroy subscription
    ngOnDestroy(): void {
        this.userSub.unsubscribe;
    }

    onSaveData(){
        this.dataStorageSrv.storeRecipes();
    }

    onFetchData(){
        this.dataStorageSrv.fetchRecipes().subscribe();
    }
}

Kemudian buka file header.component.html. Disini kita akan

• Menambahkan ngIf untuk menampilkan link jika user authenticated.
• Menambahkan menu logout jika user sudah login.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Buku Resep</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">     
          <!-- tambahkan ngIf untuk mengatur menu yang akan ditampilkan      -->
          <li class="nav-item" *ngIf="isAuthenticated"><a class="nav-link" routerLinkActive="active" routerLink="/recipes">Recipes</a></li>
          <li class="nav-item" *ngIf="!isAuthenticated"><a class="nav-link" routerLinkActive="active" routerLink="/auth" >Login</a></li>
          <li class="nav-item"><a class="nav-link" routerLinkActive="active" routerLink="/shopping-list" >Shopping List</a></li>         
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <!-- tambahkan menu logout -->
          <li class="nav-item" *ngIf="isAuthenticated">
            <a class="nav-link" style="cursor: pointer;">Logout</a>
          </li>
          <li class="dropdown" appDropDown>
            <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
            appDropdown>
              Manage
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" (click)="onSaveData()">Save Data</a></li>
              <li><a class="dropdown-item" (click)="onFetchData()">Get Data</a></li>
            </ul>
          </li>
          <!-- <div class="dropdown" appDropDown>
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown">Manage</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Save Data</a>
              <a class="dropdown-item" href="#">GetData</a>
            </div>
          </div>           -->
        </ul>
      </div>
    </div>
  </nav>

Sesuai ekspektasi, kita sudah berhasil mengatur tampilan berdasarkan authenticated user

Pada modul selanjutnya, kita akan menambahkan authentication saat melakukan data fetching