Angular4令牌身份验证'；认证/验证'；呼叫

我试图让Angular2令牌身份验证模块工作，但在第一次加载时出现了一个连续的“401”错误

我已经让auth/registration/login开始工作，但是在重新加载时——每次有人没有登录时，他们都会收到一个401错误

通过查看网络日志，我发现出于某种原因，它进行了2次

validate\u token

调用，但不应存在任何token。第一个成功，响应

200

，但第二个失败，响应

401

。我比较了两者，我看到的唯一区别是第二个没有

内容类型

标题

我的整个服务都很普通

import { Injectable } from '@angular/core';
import {Angular2TokenService} from "angular2-token";
import {Subject, Observable} from "rxjs";
import {Response} from "@angular/http";

@Injectable()
export class AuthService {

  userSignedIn$:Subject<boolean> = new Subject();

  constructor(public authService:Angular2TokenService) {

    this.authService.validateToken().subscribe(
      res => res.status == 200 ? this.userSignedIn$.next(res.json().success) : this.userSignedIn$.next(false)
    )
  }

  logOutUser():Observable<Response>{

    return this.authService.signOut().map(
      res => {
        this.userSignedIn$.next(false);
        return res;
      }
    );
  }

  registerUser(signUpData:  {email:string, password:string, passwordConfirmation:string}):Observable<Response>{
    return this.authService.registerAccount(signUpData).map(
      res => {
        this.userSignedIn$.next(true);
        return res
      }
    );
  }

  logInUser(signInData: {email:string, password:string}):Observable<Response>{

    return this.authService.signIn(signInData).map(
      res => {
        this.userSignedIn$.next(true);
        return res
      }
    );

  }

}

从'@angular/core'导入{Injectable}；
从“angular2令牌”导入{Angular2TokenService}；
从“rxjs”导入{Subject，observeable}；
从“@angular/http”导入{Response}；
@可注射（）
导出类身份验证服务{
userSignedIn$：Subject=new Subject（）；
构造函数（公共授权服务：Angular2TokenService）{
此.authService.validateToken（）.subscribe(
res=>res.status==200？this.userSignedIn$.next（res.json（）.success）：this.userSignedIn$.next（false）
)
}
logOutUser（）：可观察{
返回此.authService.signOut（）.map(
res=>{
this.userSignedIn$.next（false）；
返回res；
}
);
}
registerUser（SignUpdateA:{email:string，password:string，passwordConfirmation:string}）：可观察{
返回此.authService.registerAccount（SignUpdatea.map）(
res=>{
this.userSignedIn$.next（true）；
返回res
}
);
}
logInUser（signInData:{email:string，password:string}）：可观察{
返回此.authService.signIn（signInData.map）(
res=>{
this.userSignedIn$.next（true）；
返回res
}
);
}
}

我相信在Angular2标记中有某种我不知道的东西导致了这一点，但我不确定。我已经检查了后端，它没有收到任何请求的记录

请求失败

获取/auth/validate_令牌HTTP/1.1 主机：baseUrl 连接：保持活力 Pragma：没有缓存 缓存控制：没有缓存 接受：application/json 来源： 用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/60.0.3112.90 Safari/537.36 内容类型：application/json 推荐人： 接受编码：gzip，deflate，br 接受语言：en-US，en；q=0.8

请求成功 选项/auth/validate_令牌HTTP/1.1 主机：baseUrl 连接：保持活力 Pragma：没有缓存 缓存控制：没有缓存 访问控制请求方法：GET 来源： 用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/60.0.3112.90 Safari/537.36 访问控制请求头：内容类型 接受：/ 推荐人： 接受编码：gzip，deflate，br 接受语言：en-US，en；q=0.8

似乎失败的一个正在发出GET请求，因此导致了问题，但我不知道调用此调用的是什么。有办法看吗？

好的，有两件事。。。 首先，你说

“然而，在重新加载时——每次有人未登录时，他们都会 获取401错误。“

嗯，这就是它的工作方式。如果他们没有通过身份验证，他们会得到401。这就是401的意思——“需要认证”

如果您的意思是，如果用户在身份验证时点击浏览器的“重新加载”按钮，他们将获得401，这意味着您将在重新加载时丢失凭据—您可能希望将其存储在本地存储中

其次，您看到的两个请求行为正在起作用（我猜您的后端位于不同的端口上，而不是4200，这使得CORS起作用）

选项请求是浏览器和服务器之间的协商，以查看是否允许您从CORS的角度发出GET请求。显然你是被允许的，所以GET继续进行，但是得到了401，因为需要身份验证

---

此“额外”选项请求不受您（或Angular's）的控制，它被烘焙到浏览器中，这正是CORS的工作原理。

感谢您的解释，您的假设是正确的。它的端口是4200->8080-这很有帮助，因为我完全不知道调用第二个调用的是什么。我想我明白了，但是如果用户从未登录过，它会给人一种奇怪的感觉，因为它正在验证令牌。