angular - 使用 angular2-jwt 来自 WebApi 中间件的 IdentityServer BearerAuthentication

Question

将我的项目更新到 angular 2 final 后，我在让 WebApi2 授权与 IdentityServer3 和 angular2-jwt 一起工作时遇到了问题。在 angular2-jwt 配置中一切正常之前，headername 为空，并且 token-getter-method 仅返回令牌。

更新空标题名称后导致 javascript 错误：

 EXCEPTION: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': '' is not a valid HTTP header field name.

Answer 1

所以首先我必须提供一个标题名称，在我的根模块 angular2-jwt 配置中看起来像这样：

        provideAuth({
        headerName: 'BearerToken',
        headerPrefix: '',
        tokenName: '',
        tokenGetter: () => {
            return JSON.parse(localStorage.getItem('bearerToken'));
        },
        globalHeaders: [{'Content-Type': 'application/json'}],
        noJwtError: true,
        noTokenScheme: true
    })

还是行不通。经过一番研究，我发现标题名称应该是“授权”，而令牌名称应该是“承载者”。好的，让我们试试这样：

provideAuth({
        headerName: 'Authorization',
        headerPrefix: '',
        tokenName: 'Bearer',
        tokenGetter: () => {
            return JSON.parse(localStorage.getItem('bearerToken'));
        },
        globalHeaders: [{'Content-Type': 'application/json'}],
        noJwtError: true,
        noTokenScheme: true
    })

仍然没有达到我的带有 Authorize-Tag 的 ControllerMethod 。好的，最后一次尝试，也许当我手动添加“Bearer”时它可以工作：

        provideAuth({
        headerName: 'Authorization',
        headerPrefix: '',
        tokenName: 'Bearer',
        tokenGetter: () => {
            var token: string = JSON.parse(localStorage.getItem('bearerToken'));
            return 'Bearer ' + token;                
        },
        globalHeaders: [{'Content-Type': 'application/json'}],
        noJwtError: true,
        noTokenScheme: true
    })

并且......炸弹惊喜......它起作用了;）再玩一点我发现 tokenName 可以是空的，也可以包含其他任何东西。