如何解决Angular获取http响应标头而没有任何WebAPI调用吗?
我的sql服务器上安装了一个登录授权模块。
该模块是从wwwroot目录中的web.config文件触发的。
<modules>
<add name="PingAccessModule"/>
</modules>
在正常情况下
我连接到我的网站www.connecttosite.com->模块拦截请求并将用户登录->请求被验证,然后将其他http标头发送到我的Web api,在其中我可以读取这些附加标头并获取用户信息。 / p>
问题是这需要我创建一个额外的asp.net Web api项目,该项目与我的angular应用程序位于同一目录中。
我想知道只有我可以使用角度 连接到网站-> angular以某种方式进行呼叫->模块拦截呼叫->将额外信息附加到响应头 我可以看到此标头有角,而根本不必使用Web api?
我可以使用angular充当网络api吗?
编辑:
因此,如果我要创建自己的标题,但登录模块会将用户信息附加到标题,则当前答案有效。
查看下面的照片:
-
授权是堆栈中的第一个调用(绿色圆圈)。这是拦截网站请求并登录用户的模块。
-
红色箭头是对角度网站的实际调用。然后,您可以看到加载后的普通角度模块(main.js,env.js,polyfills等)。
-
对网站进行首次调用时,即使在所有模块进行角向加载之前,我所需的标头也将可用。角负载时如何正确访问它们?
解决方法
尝试根据情况使用模拟API。
这应该允许您将angular用作api并从常规的angular客户端调用它。
因此,您可以将其投放并像这样
.css
,
是的,您可以使用HttpInterceptor来实现。 HttpInterceptors允许您直接返回响应,而不是将其发送到服务器,在将请求发送到服务器之前修改请求(URL,正文,标头等)和/或修改从服务器返回的响应。
例如,如果请求url与/ my / path匹配,则以下拦截器将返回响应而不进行服务器调用。它还修改了请求
import { HttpInterceptor,HttpRequest,HttpHandler,HttpEvent,HttpResponse,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable,of } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
public intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url === '/my/path') {
// If request matches a certain url,do not call server and return result from angular
return of(new HttpResponse({
body: '{x: 1,y: 2}',headers: new HttpHeaders({
'Content-Type': 'application/json'
}),status: 200,}));
}
if (req.url === '/my/other/path') {
// if request matches a certain url,modify the request before sending it to the server
req = req.clone({
setHeaders: {
'X-MY-CUSTOM-HEADER': 'value'
},});
}
// Pass the request to the next interceptor,if there are none,then the server is called.
const result = next.handle(req);
return result.pipe(
map((response) => {
// modify response from server here
return response;
}),);
}
}
要使用拦截器,请通过提供HTTP_INTERCEPTORS如下将其添加到应用程序模块中:
@NgModule({
declarations: [
AppComponent,],imports: [
BrowserModule,HttpClientModule,providers: [
{ provide: HTTP_INTERCEPTORS,useClass: MyHttpInterceptor,multi: true},bootstrap: [AppComponent]
})
export class AppModule { }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。