Angular 路由到服务器但通过拦截器应用令牌 headers

Question

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

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

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

（然后服务器将验证身份验证 headers，例如 return 图像。响应将没有额外的 headers，结果将只是一个普通图像。示例: "files/1337/logo.svg".)

我不需要那个组件，是吗？我怎样才能以最简单的方式实现它？

感谢您的帮助！

Answer 1

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

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

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

    return next.handle(request);
}

Answer 2

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

请求图像

为此，将 class ActivatedRoute 注入您的组件并使用 params 或 paramMap 检索参数。在订阅块内，您可以使用 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

Answer 3

您想访问静态文件并使用 http header 中的令牌保护这些文件。好的，好的。

但是为什么你需要一条 Angular 路线呢？

由于它是服务器上的静态文件，您需要配置 backend/server 以便文件在您在应用程序中请求的路径上可用（例如带有 img 标签和 src 属性 =>顺便说一句，您宁愿使用管道将所需的标记添加到 src 属性）。

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

Angular 路由到服务器但通过拦截器应用令牌 headers

Angular route to server but apply token headers through interceptor

angular-routing

angular