SPFx - Hide / Show ribbon menu - based on permission

 // Add this import statement    

import {sp} from '@pnp/sp';  

import pnp, { PermissionKind } from "sp-pnp-js";

 public render(): void {

    this._trimSuiteBar();

    this.domElement.innerHTML = `    

          <div class="main-wrapper"> </div>`;

        //Show the loading indicator inside an element      

     

      this.context.statusRenderer.clearLoadingIndicator(this.domElement);

  }

 private _trimSuiteBar(): void {

    debugger

    pnp.sp.web.usingCaching()

      .currentUserHasPermissions(PermissionKind.EditListItems)

      .then(perms => {

        var suiteBar = document.getElementById("suiteBarTop");

        if (!suiteBar || !perms) return; //return if no suite bar OR perms not high enough

        suiteBar.setAttribute("style", "display: block !important");

      });

  }  

SPFx -display logged in user Photo our custom page

 // Add this import statement    

import {sp} from '@pnp/sp';  

import pnp, { PermissionKind } from "sp-pnp-js";

webparts.ts

public render(): void {

    this.context.statusRenderer.clearLoadingIndicator(this.domElement);

    this._trimSuiteBar();

    this.domElement.innerHTML = `    <a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button"

                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                    <img src="/_layouts/15/userphoto.aspx?UserName=${this.context.pageContext.user.email}" alt="profile">

                    </a> `;

}