🧱 第9B讲：产品管理 (Angular)

Source: Dev.to

请提供您希望翻译的正文内容，我将按照要求将其翻译为简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！

介绍

本模块专注于构建完整的产品管理功能，包括完整的 CRUD 操作以及前端界面与后端 API 的无缝集成。它确保用户能够高效地创建、更新、查看和删除产品，同时在整个系统中保持流畅且响应迅速的体验。

管理员将能够：

• 管理产品
• 与您已经构建的后端 API 进行通信

涵盖的主题

• 身份验证守卫
• 产品的完整 CRUD 页面
• 产品服务
• 产品路由
• 更新应用路由
• 更新菜单

身份验证守卫

路径: 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 页面

为 Product 功能创建以下三个文件：

• src/app/features/products/product/product.html
• src/app/features/products/product/product.scss（空文件）
• src/app/features/products/product/product.ts

product.html

        

        
        
    

    
        
    

    
        
        管理产品
            
                
                
        
    
    
        
            
                
            
            编号
            
                名称
                
            
            
                描述
                
            
            
                价格
                
            
            
                库存
                
            
            
        
    
    
        
            
                
            
            {{ product.id }}
            {{ product.name }}
            {{ product.description }}
            {{ product.price | currency: 'USD' }}
            {{ product.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