title: How to get the roles from a JWT token from a web api in Angular
body: <p>I need to get the roles from my JWT token which was created in asp.net core using claims. This is the token I get:</p>
  
  <pre><code>FirstName: "Juan"
  LastName: "Dela Cruz"
  MiddleName: "A."
  UserId: "2"
  aud: "http://192.168.1.6:13735"
  exp: 1590001134
  http://schemas.microsoft.com/ws/2008/06/identity/claims/role: Array(2)
  0: "User"
  1: "Administrator"
  length: 2
  __proto__: Array(0)
  iss: "http://192.168.1.6:13735"
  jti: "5732c019-0f91-4e32-8f8d-93da43547346"
  sub: "juan"
  </code></pre>
  
  <p>I get this using this code in my web api</p>
  
  <pre><code>var claims = new List&lt;Claim&gt;
                  {
                      new Claim(JwtRegisteredClaimNames.Sub, applicationUser.UserName),
                      new Claim("UserId", applicationUser.Id.ToString()),
                      new Claim("FirstName", applicationUser.FirstName.ToString()),
                      new Claim("MiddleName", applicationUser.MiddleName.ToString()),
                      new Claim("LastName", applicationUser.LastName.ToString()),
                      new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
                  };
  
                  foreach(var role in roles)
                  {
                      claims.Add(new Claim(ClaimTypes.Role, role.RoleName));
                  }
  
                  var validIssuer = configuration["WebToken:Issuer"];
                  var validAudience = configuration["WebToken:Audience"];
  
                  var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(configuration["AmsToken:TokenKey"]));
                  var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);
  
                  var tokenOptions = new JwtSecurityToken(
                          issuer: "http://192.168.1.6:13735",
                          audience: "http://192.168.1.6:13735",
                          claims: claims,
                          expires: DateTime.Now.AddHours(8),
                          signingCredentials: signinCredentials
                      );
                  var tokenString = new JwtSecurityTokenHandler().WriteToken(tokenOptions);
                  return Ok(new { Token = tokenString });
  </code></pre>
  
  <p>In my angular application, I need to get the roles so I can hide or show buttons accordingly. However, I do not know how to get the roles from the web token generated. This is how I get the roles from the Token:</p>
  
  <pre><code> // Show or hide the navigation links
    roleMatch(): void {
      debugger;
      let isMatch = false;
      const payload = JSON.parse(window.atob(localStorage.getItem('authToken').split('.')[1]));
      const userRole = payload.role; ======&gt; I get undefined on this part
    }
  </code></pre>
  
  <p>Could you pleas point out how to get what I need? Thank you.</p>