如何处理角中的大URL参数

Question

在我的酒店预订应用程序中，包括、酒店搜索、->、Select、->、Select、->、Payment、等多个阶段，每个阶段都有不同的页面。所有的阶段都需要来自前一阶段的许多输入(在某些情况下大约是5-8 )，比如会话id、签入、签出等等。我使用查询参数进行应用程序内导航，因为当用户刷新页面时，它不应该中断。

我面临的问题是，太多的字段会使URL变得丑陋，而且nginx也会在某个阶段抛出错误，因为URL很大。我尝试过将这些数据存储在服务中，但这并没有帮助，因为当刷新页面时，数据丢失了&存储在localStorage中看起来不太好。那么，我在这里可以采取什么正确或最好的方法来避免这些问题呢？

Answer 1

我将向您的域介绍一个名为BookingDraft之类的实体，您正在构建一个预订，但它还不是一个功能齐全的预订。

这个实体应该有它自己的唯一ID，它将在URL中。如果要将该草案实体持久化到数据库中，它还应该具有用户ID。

export interface BookingDraft {
  // Unique identifier for this draft, such as a GUID. Can be persisted to a database, API, or to localStorage. This should go in the URL.
  id:string;
  userId:string;
  hotelId?:string;
  roomId?:string;
  checkIn?:Date;
  checkOut?:Date;
  sessionId?:string;
}

然后，您的路线将有预订ID在其中，然后是一个分段的步骤。

/create-booking/{bookingDraftId}/select-hotel
/create-booking/{bookingDraftId}/select-room
/create-booking/{bookingDraftId}/payment

您可以在每个段的路由中添加一个保护程序或某种验证逻辑，以确保在用户尝试选择房间之前草案已经有了一个hotelId：

const routes: Routes = [
  {
    path: 'create-booking/:bookingDraftId',
    children: [
      {
        path: 'select-hotel',
        component: SelectHotelPageComponent
      },
      {
        path: 'select-room',
        component: SelectRoomPageComponent,
        canActivate: [HotelSelectedGuard]
      },
    ]
  }
]

export class HotelSelectedGuard implements CanActivate {
  constructor(private bookingDraftService: BookingDraftService, private router: Router) {}

  public canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree> {
    const draftId = next.paramMap.get('bookingDraftId');

    return this.bookingDraftService
      .getDraft(draftId)
      .pipe(map(draft => {
        if(!!draft.hotelId) {
          return true;
        }

        return this.router.createUrlTree(['create-booking',draftId,'select-hotel'], {
          queryParams: {
            message: 'Please select a hotel before selecting a room'
          }
        })
      }))
  }
}

创建一个BookingDraftService以保存和检索往返于localStorage或某些API的预订草稿。