Angular：如何通过 API 调用使用 JWT 身份验证

Question

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

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

我通过调用 api 来验证来自 db 的用户来更改此 fake-backend.ts。但我遇到了错误。

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

也调用不返回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 else 0 中。也从 api 获得响应，但控制不会返回到 authentication.service.ts，而是转到 login.component.ts 订阅并抛出此错误。

Answer 1

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

所以为了解决你的问题，我建议你使用像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 类吗？

Answer 2

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

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

另外，您能否确认您的后端正在监听https://localhost:44348/api 而不是您的前端？

Answer 3

嗯，看来你在这不合时宜……

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

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。