如何使用SPHttp/SPHttpClient（非sp.web/PNP）获取SPFx用户头衔及登录信息

Got it, let's tackle your requirements head-on using only SharePoint's native SPHttpClient—no PnP JS or the sp.web wrapper involved.

1. Core Concept: Calling SharePoint REST API Directly #

To get the current user's job title (your requested "headline"), we’ll call SharePoint’s REST endpoint /_api/web/currentuser with a $select parameter to fetch only the fields we need (this keeps the request lightweight and efficient). The job title is stored in the JobTitle property of the user object returned by the API.

2. Complete SPFx WebPart Code Example #

Here’s a full, working example you can adapt for your WebPart. I’ll break down the key parts step by step:

Step 1: Import Required Modules #

First, add these imports at the top of your WebPart file to access the necessary SPFx utilities:

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import * as strings from 'UserDetailsWebPartStrings';

Step 2: Define a Type Interface for User Data #

Create a TypeScript interface to enforce type safety for the user data we’ll fetch (this helps with IntelliSense and avoids runtime errors):

interface ICurrentUser {
  Id: number;
  Title: string;
  JobTitle: string;
}

Step 3: WebPart Class Implementation #

Here’s the main WebPart class with the logic to fetch and display the current user’s job title:

export default class UserDetailsWebPart extends BaseClientSideWebPart<IUserDetailsWebPartProps> {

  // Method to fetch current user details via SPHttpClient
  private async getCurrentUser(): Promise<ICurrentUser> {
    // Build the REST API URL using the current web's absolute URL
    const restUrl = `${this.context.pageContext.web.absoluteUrl}/_api/web/currentuser?$select=Id,Title,JobTitle`;
    
    // Execute the GET request with SPHttpClient
    const response: SPHttpClientResponse = await this.context.spHttpClient.get(
      restUrl,
      SPHttpClient.configurations.v1 // Use the default v1 configuration
    );

    // Handle errors if the request fails
    if (!response.ok) {
      const errorMessage = await response.text();
      throw new Error(`Failed to load user details: ${errorMessage}`);
    }

    // Parse the JSON response and return typed user data
    const userData = await response.json();
    return userData as ICurrentUser;
  }

  // Render method to display user info in the WebPart
  public async render(): Promise<void> {
    let htmlContent = `<div class="${styles.userDetailsWebPart}">Loading user details...</div>`;
    
    try {
      const currentUser = await this.getCurrentUser();
      // Build HTML to display the fetched data
      htmlContent = `
        <div class="${styles.userDetailsWebPart}">
          <h3>Current User Information</h3>
          <ul>
            <li><strong>Full Name:</strong> ${currentUser.Title}</li>
            <li><strong>Job Title:</strong> ${currentUser.JobTitle || 'Not specified'}</li>
            <li><strong>User ID:</strong> ${currentUser.Id}</li>
          </ul>
        </div>
      `;
    } catch (error) {
      // Show error message if something goes wrong
      htmlContent = `<div class="${styles.userDetailsWebPart}">Error: ${(error as Error).message}</div>`;
    }

    this.domElement.innerHTML = htmlContent;
  }

  // Standard SPFx WebPart properties (adjust as needed)
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Key Details to Note: #

• SPHttpClient Access: We use this.context.spHttpClient which is automatically provided in SPFx WebParts—no additional setup or dependencies required.
• Efficient Request: The $select parameter ensures we only retrieve the fields we need (Id, Title, JobTitle), minimizing the API response size.
• Error Handling: The example includes basic error handling to catch and display issues with the API call (like permission errors or network issues).
• Type Safety: The ICurrentUser interface ensures we work with predictable data structures, making your code more maintainable.

This implementation strictly uses native SPFx APIs without any reliance on PnP JS or the sp.web wrapper, which aligns perfectly with your requirements.

内容的提问来源于stack exchange，提问作者NightTom