如何在angular应用程序中检查wordpress中的用户角色

// wordpress.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class WordpressService {
  private apiUrl = 'https://your-wordpress-site/wp-json/wp/v2';

  constructor(private http: HttpClient) { }

  getUserRole(): Promise<string> {
    return this.http.get<any>(`${this.apiUrl}/users/me`)
      .toPromise()
      .then(response => {
        // 解析返回的数据，获取用户角色信息
        const userRoles = response.roles;
        // 假设用户只有一个角色，返回第一个角色
        return userRoles[0];
      });
  }
}

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { WordpressService } from './wordpress.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="userRole">
      <h1>Welcome, {{ userRole }}!</h1>
      <p>Here is your role-specific content.</p>
    </div>
  `
})
export class AppComponent implements OnInit {
  userRole: string;

  constructor(private wordpressService: WordpressService) { }

  ngOnInit() {
    this.wordpressService.getUserRole()
      .then(role => {
        this.userRole = role;
      })
      .catch(error => {
        console.error('Failed to get user role:', error);
      });
  }
}