I want to remove the ability to filter by sensitive data in the query parameters. To do this, I changed the endpoint that retrieves the filtered data from GET to POST.

Before:

  public getUsers(pageRequest: PageRequest, filterRequest: FilterRequest, sortRequest: SortRequest): Observable<Response<User[]>> {
        const params: HttpParams = toHttpParams(pageRequest, filterRequest, sortRequest);
        return this.httpClient.get<Response<UserEntry[]>>('/users', { params: params });
    }

After:

  public getUsers(pageRequest: PageRequest, filterRequest: FilterRequest, sortRequest: SortRequest): Observable<Response<User[]>> {
        const body = {
            pageRequest: pageRequest,
            filterRequest: filterRequest,
            sortRequest: sortRequest
        };
        return this.httpClient.post<Response<User[]>>('/users', body);
    }

On the server side I changed the /users endpoint from GET to POST and it returns the data correctly, so it works fine.

However, I have a problem on the client side, namely, the user data in the list is returned correctly (so the endpoint works) but I have a problem with filtering the data, i.e. for example, applying a filter that only displays new users, etc.
In the GET method this worked fine, but after changing to POST the filters stopped working.

Perhaps by doing this the filtering should be moved from the query to the body? I just don’t know how I could do it properly?

    private getUsers(): void {
        this.loading = true;
        const requestParams = this.requestParamsService.getRequestParams({
                                                                             pageNumber: '1',
                                                                             pageSize: '10',
                                                                             sort: 'date, ASC'
                                                                         });
        const pageRequest = new PageRequest(requestParams.pagingAndSortingParams.pageNumber, requestParams.pagingAndSortingParams.pageSize);
        const sortRequest = new SortRequest(requestParams.pagingAndSortingParams.sort);
        const filterRequest = requestParams.filterRequest;
        this.usersService.getUsers(pageRequest, filterRequest, sortRequest)
            .subscribe({
                           next: response => {
                               const pagination = response.pagination;
                               const [ field, order ] = pagination.sort.replace(' ', '')
                                                                  .split(',');
                               this.tableMetadata = {
                                   first: pagination.currentPageNumber * pagination.pageSize - pagination.pageSize,
                                   rows: pagination.pageSize,
                                   sortField: field,
                                   sortOrder: order === 'ASC' ? 1 : -1
                               };
                               this.responseData = response.data;
                           },
                           error: () => {
                               this.responseData = [];
                               this.loading = false;
                           },
                           complete: () => {
                               this.applyTableSorting();
                               this.requestParamsService.refreshQueryParams({ selectedTab: UsersTabType[ this.currentTab ] });
                               this.loading = false;
                           }
                       });
    }

    public readParamsFromQuery(params: Params): void {
        if (Object.keys(params).length == 0) {
            return;
        }

        let pagingAndSortingParams: PagingAndSortingParams = null;
        let filterRequest: FilterRequest = null;
        Object.keys(params).forEach(paramKey => {
            switch (paramKey) {
                case 'pageNumber':
                case 'pageSize':
                case 'sort':
                    pagingAndSortingParams = { ...pagingAndSortingParams, [`${paramKey}`]: params[paramKey] };
                    break;
                case 'selectedTab':
                    break;
                default: {
                    const values = params[paramKey].split(',');
                    if (values.length > 1) {
                        filterRequest = { ...filterRequest, [`${paramKey}`]: values };
                    } else {
                        filterRequest = { ...filterRequest, [`${paramKey}`]: values[0] };
                    }

                    break;
                }
            }
        });
        const requestParams: RequestParamsMetadata = {
            pagingAndSortingParams: pagingAndSortingParams,
            filterRequest: filterRequest
        };
        if (!pagingAndSortingParams && !filterRequest) {
            return;
        }

        if (JSON.stringify(this._requestParams) !== JSON.stringify(requestParams)) {
            this._requestParams = requestParams;
            this.updateRequestPrams();
        }
    }