到服务器的角度路由，但通过拦截器应用令牌头

问题描述

在我的Angular路由中，我想添加一条从后端提供身份验证文件的路由：

{ path: 'files/:id/:name',pathMatch: 'full',??? }

我已经有一个HTTP拦截器，它将令牌头添加到其他请求中。我想要实现的只是（现有的）拦截器添加令牌头，然后将请求传递到服务器。

（然后服务器将验证身份验证标头并例如返回图像。响应将没有其他标头，结果将只是纯图像。例如：“ files / 1337 / logo.svg”。）>

我不需要为此的组件，对吗？如何以最简单的方式实现这一目标？

感谢您的帮助！

解决方法

您需要将以下代码添加到拦截器中：

intercept(request: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
        setHeaders: {
            Authorization: `Bearer <your token>`
        }
    });

    return next.handle(request);
}

如果用户导航到您在Angular中定义的路线，则不会向服务器提交任何请求。 Angular路由器会对url更改做出反应，并将您的组件加载到路由器出口中。您可以创建一个组件来读取url的可变部分，然后从API请求图像。

为此，将类ActivatedRoute注入到组件中，并使用params或paramMap来检索参数。在subscription块内，您可以使用HttpClient调用您的API。

@Component({
    selector: 'app-test',templateUrl: './test.component.html',styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {


    constructor(private readonly route: ActivatedRoute) {
        this.route.params.subscribe((params: Params) => {
         
        });
        this.route.paramMap.subscribe((paramMap: ParamMap) => {
          
        });
    }

    ngOnInit(): void {
    }

}

当您的图片受到保护后，您可能希望将它们作为“ blob”获取，然后将其加载到img标签中。 Look at this question

您要访问静态文件，并使用http标头中的令牌保护这些文件。好的，很好。

但是为什么要为此使用Angular路线？

由于它是服务器上的静态文件，因此您需要配置后端/服务器，以使这些文件可在您在应用程序中请求的路径上使用（带有img标签和src属性，例如=> btw）。宁愿使用管道将所需令牌添加到src属性。

Angular路由配置用于基于路径加载组件。它模拟了一个“基于页面”的网站，尽管在后台它是一个单页面的应用程序，仅加载了index.html。

angular angular-routing