🧱 강의 9B : 제품 관리 (Angular)

Source: Dev.to

위에 제공된 소스 링크만으로는 번역할 본문이 없습니다. 번역이 필요한 전체 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.

소개

이 모듈은 전체 CRUD 작업과 프런트엔드 인터페이스와 백엔드 API 간의 원활한 통합을 포함한 완전한 제품 관리 기능 구축에 중점을 둡니다. 이를 통해 사용자는 시스템 전반에 걸쳐 원활하고 반응성이 뛰어난 경험을 유지하면서 제품을 효율적으로 생성, 업데이트, 조회 및 삭제할 수 있습니다.

관리자는 다음을 수행할 수 있습니다:

• 제품 관리
• 이미 구축한 백엔드 API와 통신

Topics Covered

• Auth Guard
• 제품에 대한 전체 CRUD 페이지
• Product Service
• Product Route
• App Routes 업데이트
• 메뉴 업데이트

인증 가드

경로: src/app/services/authguard/auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AuthApiService } from '../api/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService {
  constructor(
    private authService: AuthApiService,
    private router: Router
  ) {}

  canActivate(): boolean {
    const token = this.authService.getToken();
    const refreshToken = this.authService.getRefreshToken();

    // If no token and no refresh token, redirect to login
    if (!token && !refreshToken) {
      this.router.navigate(['/auth/login']);
      return false;
    }

    // If no token but refresh token exists, try to refresh
    if (!token && refreshToken) {
      this.attemptTokenRefresh(refreshToken);
      return false; // Wait for refresh attempt
    }

    // If token exists, user is authenticated
    if (token) {
      return true;
    }

    return false;
  }

  private attemptTokenRefresh(refreshToken: string): void {
    this.authService.refresh({ token: '', refreshToken }).subscribe({
      next: () => {
        // Token refreshed successfully, reload current route
        this.router.navigate([this.router.url]);
      },
      error: () => {
        // Refresh failed, redirect to login
        this.authService.logout();
        this.router.navigate(['/auth/login']);
      }
    });
  }
}

PrimeNG을 사용한 UI 페이지

제품 기능을 위해 다음 세 파일을 생성하세요:

• src/app/features/products/product/product.html
• src/app/features/products/product/product.scss (빈 파일)
• src/app/features/products/product/product.ts

product.html

        

        
        
    

    
        
    

    
        
        Manage Products
            
                
                
        
    
    
        
            
                
            
            ID
            
                Name
                
            
            
                Description
                
            
            
                Price
                
            
            
                Stock
                
            
            
        
    
    
        
            
                
            
            {{ product.id }}
            {{ product.name }}
            {{ product.description }}
            {{ product.price | currency: 'USD' }}
            {{ product.stock }}
            
                
                
            
        
    

    
        
            
                Name
                
                Name is required.
            
            
                Description
                
            
            
                
                    Price
                    
                
                
                    Stock
                    
                
            
        
    

    
        
        
    

product.scss

product.ts

import { Component, OnInit, signal, ViewChild } from '@angular/core';
import { ConfirmationService, MessageService } from 'primeng/api';
import { Table, TableModule } from 'primeng/table';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { ToastModule } from 'primeng/toast';
import { ToolbarModule } from 'primeng/toolbar';
import { RatingModule } from 'primeng/rating';
import { InputTextModule } from 'primeng/inputtext';
import { TextareaModule } from 'primeng/textarea';
import { SelectModule } from 'primeng/select';
import { Radi