将授权令牌从Angular客户端传递到.NET服务器？

Question

这里是我简单的SignalR集线器，它将发送一条包含正在运行的数据的消息。现在，我想对这些消息进行身份验证以增加一些安全性。无论如何，有没有将角度客户端上的用户令牌发送回集线器以验证它是经过身份验证的用户，然后将启动集线器连接？当前，任何客户端都可以创建到我的集线器的连接并接收消息。

我在.NET客户端中看到您可以使用标头来传递令牌来执行此操作，但是看来您不能使用angular吗？

Angular客户：

public async startUp(): Promise<void> {

// How can I pass this in to authenticate while creating the connection?
// const userToken = this._userToken;

this._hubConnection = new hubConnection(this._hubUrl);
await this.createHubProxy();
this.configureEventHandlers();

await this._hubConnection.start()
.done(() => {})
.fail(() => {});

};

。NET服务器端

var connection = new Communications.Server.Configuration();
connection.Url = this.hubUrl;
connection.UseSignalR = true;
connection.UseWebApi = false;
Starter.Start(connection);

用于实际中心的单独类：

[HubName("ExampleHub")]
public class ExampleHub : Hub
{
    public static void sendMessage(Message msg)
    {
        GlobalHost.ConnectionManager.GetHubContext<ExampleHub>().Clients.All.serverSentMessage(msg);
    }
}

}

Answer 1

您可以通过使用HTTP拦截器或通过在每个请求中手动设置标头来实现。不过建议使用第一个选项。

下面您将找到一个简单的示例，该示例设置Authorization标头并附加令牌。

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}


  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const token = this.authService.token;
    const authRequest = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + token)
    });
    return next.handle(authRequest);
  }
}

同样在app.module.ts中，您还需要在提供者数组中添加拦截器，如下所示：

@NgModule({
  declarations: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
})

在后端上，应该在开始连接之前检查令牌是否存在于授权标头中。由于我不懂.NET，因此无法举一个例子。