解决Angular与Flask应用中用户个性化预订数据展示问题

@app.route('/login', methods=['POST'])
def login_user():
    data = request.json
    # ... (省略验证逻辑) ...
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM users WHERE email = ?', (data['email'],))
        user = cursor.fetchone()

    if user:
        hashed_password = hash_password(data['pwd'])
        if hashed_password == user[6]:
            session['user_id'] = user[0] # 存储用户ID到会话
            return jsonify({'message': 'Login successful'})
        # ... (省略错误处理) ...

@app.route('/user-reservations/<int:user_id>', methods=['GET'])
def get_user_reservations(user_id):
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM reservations WHERE user_id = ?', (user_id,)) # 原始代码
        reservations = [
            {'id': row[0], 'user_id': row[1], 'brand': row[2], 'from_location': row[3], 'to_location': row[4]}
            for row in cursor.fetchall()
        ]
    print(reservations)
    return jsonify(reservations)

@app.route('/user-reservations/<int:user_id>', methods=['GET'])
def get_user_reservations(user_id):
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        # 修正：移除元组封装，直接传递 user_id
        cursor.execute('SELECT * FROM reservations WHERE user_id = ?', user_id) 
        reservations = [
            {'id': row[0], 'user_id': row[1], 'brand': row[2], 'from_location': row[3], 'to_location': row[4]}
            for row in cursor.fetchall()
        ]
    print(reservations)
    return jsonify(reservations)

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthorizationService {
  private apiUrl = 'http://localhost:5000';
  private user: any = { id: null, firstname: '', lastname: '', email: '' }; 
  private logged = false;

  // ... (其他方法，如loginUser, logout, registerUser) ...

  getUserId(): number | null {
    // 确保这里的 user.id 包含了从后端获取到的用户ID
    return this.user.id ?? null;
  }

  constructor(private router: Router, private http: HttpClient) {}
}

@app.route('/login', methods=['POST'])
def login_user():
    data = request.json
    # ... (省略验证逻辑) ...
    with sqlite3.connect('rental-users.db') as conn:
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM users WHERE email = ?', (data['email'],))
        user = cursor.fetchone()

    if user:
        hashed_password = hash_password(data['pwd'])
        if hashed_password == user[6]:
            session['user_id'] = user[0]
            # 返回用户ID给前端
            return jsonify({'message': 'Login successful', 'userId': user[0]}) 
        # ...

loginUser(loginData: any): Observable<any> {
    const url = `${this.apiUrl}/login`;
    return this.http.post(url, loginData).pipe(
      tap((response) => { // 将参数名改为 response 以避免与内部 user 变量混淆
        if (response && response.userId) { // 检查后端返回的 userId
          this.user.id = response.userId; // 更新用户ID
          this.logged = true;
        } else {
          // 处理未返回 userId 的情况
          this.logged = false;
          console.warn('Login successful but no userId received.');
        }
      }),
      catchError((error) => {
        this.logged = false;
        return throwError(error);
      })
    );
  }

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

@Injectable({
  providedIn: 'root',
})
export class ReservationService {
  private apiUrl = 'http://localhost:5000';

  constructor(private http: HttpClient) {}

  makeReservation(userId: number, selectedCar: string, fromLocation: string, toLocation: string): Observable<any> {
    const url = `${this.apiUrl}/make-reservation/${userId}`;
    const reservationData = {
      brand: selectedCar,
      from_location: fromLocation,
      to_location: toLocation,
    };
    return this.http.post(url, reservationData);
  }

  getUserReservations(userId: number): Observable<any[]> {
    const url = `${this.apiUrl}/user-reservations/${userId}`;
    return this.http.get<any[]>(url);
  }
}

import { Component, OnInit } from '@angular/core';
import { AuthorizationService } from '../authorization.service';
import { ReservationService } from '../reservation.service';
// ... (其他导入) ...

@Component({
  selector: 'app-my-reservations',
  templateUrl: './my-reservations.component.html',
  styleUrls: ['./my-reservations.component.css'],
})
export class MyReservationsComponent implements OnInit {
  reservations: any[] = [];
  // ... (其他属性) ...

  constructor(
    private reservationService: ReservationService,
    private authService: AuthorizationService,
    // ... (其他服务) ...
  ) {}

  ngOnInit() {
    this.loadReservationHistory();
    // ...
  }

  loadReservationHistory() {
    const userId = this.authService.getUserId(); // 从认证服务获取用户ID

    // 确保 userId 不为 null 或 0
    if (userId !== null && userId !== 0) {
      this.reservationService.getUserReservations(userId).subscribe(
        (res) => {
          console.log(res);
          this.reservations = res;
        },
        (err) => {
          console.error('Error loading reservations:', err);
        }
      );
    } else {
      console.warn('User ID is not available. Cannot load reservations.');
      this.reservations = []; // 清空或显示无预订信息
    }
  }

  makeReservation() {
    const userId = this.authService.getUserId();
    // 确保 userId 不为 null 或 0
    if (userId !== null && userId !== 0) {
      this.reservationService
        .makeReservation(
          userId,
          this.reservationData.brand,
          this.reservationData.from_location,
          this.reservationData.to_location
        )
        .subscribe(
          (res) => {
            console.log(res);
            this.toastr.success('Reservation successful!', 'Success');
            this.loadReservationHistory(); // 预订成功后刷新列表
          },
          (err) => {
            console.error('Error making reservation:', err);
            this.toastr.error('Error making reservation', 'Error');
          }
        );
    } else {
      console.error('User ID is not available. Cannot make reservation.');
      this.toastr.error('Please log in to make a reservation.', 'Error');
    }
  }
}