how to add authorization to gRpc headers from Vue.js

Question

first of all . i created a gRpc service project from VS2019, and added Jwt Bearer Authentication and Authorization. when client app (VS code + Vue.js) request login service method , a token will be sent.

string key = "AB6B4DC1-FABF-47AE-A585-4AD154758B05";
var securityKey = new SymmetricSecurityKey(Guid.Parse(key).ToByteArray());
var claims = new[] {
    new Claim(ClaimTypes.Name, clientId),
    new Claim(ClaimTypes.NameIdentifier,clientId)
};

var token = new JwtSecurityToken("client",
    "client",
    claims,
    notBefore:DateTime.Now,
    expires: DateTime.Now.AddSeconds(60),
    signingCredentials: new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256)
    );

return new JwtSecurityTokenHandler().WriteToken(token);

and then jwt configuration is

var key = "AB6B4DC1-FABF-47AE-A585-4AD154758B05";

options.TokenValidationParameters = new TokenValidationParameters
{
    ClockSkew = TimeSpan.FromSeconds(30),
    ValidateIssuer = true,
    ValidateAudience = true,
    AudienceValidator = (m, n, z) =>
    {
        return m != null && m.FirstOrDefault().Equals("");
    },
    ValidateLifetime = true,
    ValidateIssuerSigningKey = true,
    ValidAudience = "client",
    ValidIssuer = "client",
    IssuerSigningKey = new SymmetricSecurityKey(Guid.Parse(key).ToByteArray())
};

the problem is i can't pass authorization as the header item to gRpc Server code bellow：

'

import { Metadata } from '@grpc/grpc-js/build/src/metadata'
import { CallCredentials } from '@grpc/grpc-js/build/src/call-credentials'

export default {
  name: 'App',
  created () {
    this.client = new GreeterClient('https://localhost:5001', CallCredentials.createFromPlugin, null)
    this.appClient = new AppClient('https://localhost:5001', null, null)
  },
  methods: {
    loginSys () {
      var lm = new LoginModel()
      lm.setLoginname('admin')
      lm.setLoginpwd('abc123!@#')
      lm.setLogincode('kkkkkrrr')

      var appInfo = new AppInfo()
      appInfo.setAppid('asdfasdfasdf')
      appInfo.setApptoken('12345678901234567890')
      appInfo.setModel(lm)

      this.appClient.login(appInfo, {}, (err, response) => {
        debugger
        if (err) {
          console.log(`Unexpected error for sayHello: code = ${err.code}, message = "${err.message}"`)
        } else {
          console.log(response.getMessage())
          console.log(response.getIssucceed())
          if (response.hasUserinfo()) {
            var userInfo = response.getUserinfo()
            console.log(userInfo.getAvatar())
            console.log(userInfo.getUsername())
            console.log(userInfo.getCellphone())
          }
        }
      })
    },
    get1 () {
      var token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiY2xpZW50SWQiLCJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6ImNsaWVudElkIiwibmJmIjoxNjI5MDM0MzkxLCJleHAiOjE2MjkwMzQ0NTEsImlzcyI6IkFpMi5XZWIiLCJhdWQiOiJBaTIuV2ViIn0.1QpFsvzRvlBvTPNQ4hzETIDaLfmUsxmVvXaRyXVskjI'

      var metadata = new Metadata()
      metadata.add('authorization', 'Bearer ' + token)

      var request = new HelloRequest()
      request.setName('World')
      this.client.sayHello(request, metadata, (err, response) => {
        if (err) {
          console.log(`Unexpected error for sayHello: code = ${err.code}, message = "${err.message}"`)
        } else {
          console.log(response.getMessage())
        }
      })
    }
  }
}

method : get1 is used to do the "authorization" test . when i executed this method , i found authorization doesn't exist in http headers. i don't know why , and what should i do ?

Answer 1

i got the answer.

  const token = 'eyJhbGciOiJIUzyXVskjI'
  const metadata = { 'authorization': 'Bearer ' + token }