0

我正在关注这篇文章。作者fake-backend.ts用于拦截一个以 url 结尾的 api 调用，/api/authenticate并根据静态数组中的用户名和密码检查用户。

当用户使用用户名和密码提交表单时，它会调用authentication.service.ts登录函数，该函数会在路径上发布调用，/api/authenticate并且由于调用的 url 以 so 结尾，/api/authenticate所以现在fake-backend.ts开始发挥作用，从静态数组验证用户。成功验证后，它会生成一个令牌并控制返回authentication.service.ts到映射响应对象

我fake-backend.ts通过调用 api 来验证数据库中的用户来改变这一点。但我得到了错误。

https://localhost:44348/api/authenticate的 Http 失败响应：404 OK

也调用不返回authentication.service.ts来映射响应对象。

if (request.url.endsWith('/api/authenticate') && request.method === 'POST') {
const UserName = request.body.username;
const Password = request.body.password;
var credentials = { UserName, Password };
//return this.employeeService.autheticateEmployeeByCredentials(credentials);
this.employeeService.autheticateEmployeeByCredentials(credentials).subscribe((res) => {
if (res == 1) 
    return of(new HttpResponse({ status: 200, body: { token: 'fake-jwt-token' } }));    
else 
      return throwError({ error: { message: 'Username or password is incorrect' } });   
  });
}

编辑：
我正在使用 api 控制器并从返回的 1 进行验证，如果它在 db 中，否则为 0。还从 api 获得响应，但控制不会返回到 authentication.service.ts，而是去login.component.ts订阅并抛出此错误。

4

3 回答 3

1

首先，您的响应中的 404 是NotFound响应 - 这意味着您的服务无法看到该网址。默认情况下，所有来自服务器的不成功响应（状态码在 200-299 范围之外的响应）都被视为错误响应，这意味着它们会触发错误。从外观上看，fake-backend 没有 try-catch 机制，因此 404 不会命中承诺链中的任何订阅。

因此，为了解决您的问题，我建议您使用Postman之类的应用程序 来验证您的https://localhost:44348/api是否确实有效。

然后在它说的地方return next.handle(request);，使用 catchError 来处理来自您的 api 的不成功响应，如下例所示。然后在您的 authentication.service.ts 中，您可以执行类似的操作authenticateUser(/*parameters*/).subscribe(response => if(response.body.error) {/*handle error */} else {/*do your normal stuff */}); 

 return next.handle(request).pipe(
              catchError(error => {
                return of(
                  new HttpResponse({
                    status: 200,
                    body: {
                      error: {
                        responseMessage: 'Some Error Accessing API'
                      }
                      /**some response body you can surely handle in authentication.service.ts */
                    }
                  })
                );
              })
            );

为了完全解决您的具体问题，您介意发布您的完整 FakeBackendInterceptor 类吗？

于 2018-07-20T13:09:54.003 回答
0

看起来你有两个问题（或者更多），但让我们解决第一个问题......

为了不破坏承诺链，您需要返回对employeeservice 的调用。

此外，您能否验证您的后端正在监听https://localhost:44348/api而不是您的前端？

于 2018-07-20T07:23:28.967 回答
0

哼，看来你在这儿不合时宜……

在他的例子中，他用那个拦截器伪造了他的后端。

if (request.url.endsWith('/api/authenticate') && request.method === 'POST') { const UserName = request.body.username; const Password = request.body.password; var credentials = { UserName, Password }; //return this.employeeService.autheticateEmployeeByCredentials(credentials); this.employeeService.autheticateEmployeeByCredentials(credentials).subscribe((res) => { if (res == 1) return of(new HttpResponse({ status: 200, body: { token: 'fake-jwt-token' } })); else return throwError({ error: { message: 'Username or password is incorrect' } }); });

因此，例如，如果您将使用后端进行身份验证，则应将其删除。

之后，在身份验证服务中，您应该调用后端正在侦听的 url。

于 2018-07-20T07:33:21.403 回答