how to add authorization to gRpc headers from Vue.js - 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 }