为什么 cookie 服务返回错误的值？答案

【问题标题】：Why is the cookie service returning the wrong value?为什么 cookie 服务返回错误的值？
【发布时间】：2018-11-24 21:36:35
【问题描述】：

我正在使用 Angular 6 来设置一些 API 调用，并使用 ngx cookieService 来访问和存储 cookie。我想获取从我的 API 获得的访问令牌，并在另一个服务中发送 get 请求时将其用作标头。这是我的登录服务中的功能：

getData()  {
    return this.http.post(this.base_URL + "web_app/login/", JSON.stringify(this.login))   

  .subscribe(response=>{    
     this.access_token = response['access_token'];
     console.log("received token " + this.access_token)
     this.cookieService.set( 'access_token', this.access_token );
     this.cookieValue = this.cookieService.get('access_token');
     console.log("set cookie value" + this.cookieValue);

    } }

这是另一个服务：

farmAccess(){
    let headers = new HttpHeaders();
    this.cookieValue = this.cookieService.get('access_token');
    headers.append('access_token', this.cookieValue);
    console.log("retrieved cookie value" + this.cookieValue);
    return this.http.get(this.baseURL + 'web_app/farm_access/', {headers})
.subscribe(
res => console.log(res),
         // msg => console.error(`Error: ${msg.status} ${msg.statusText}`
        )
   };

我将访问令牌存储为 cookie，并希望在 farmAccess 服务中访问它。但是，这是行不通的。比较这两个 cookie，这是控制台上的内容：

这是我调用函数的地方：

 ngOnInit(): void {
this.data = this.login.getData();
this.farmAccessdata = this.getFarmAccess.farmAccess();

}

我检查了控制台中的 cookie，它显示了正确的 access_token 值。那么为什么farmAccess 服务会提取错误的值呢？感谢您的帮助！

编辑：看起来功能运行不正常。如何让它们按我想要的顺序运行？

【问题讨论】：

为什么不直接使用 sessionStorage 或 localStorage？将消除 cookie 服务的使用，this.cookie.service 将变为 this.localStorage.set( 'access_token', this.access_token );
根据您的屏幕截图，farmAccess() 似乎在 getData() 之前被调用 - 它存储新令牌。因为这个 farmAccess() 正在从 cookie 中获取旧令牌。
@HirenShah 我在 farmAccess() 之前调用 getData() 吗？我已更新我的帖子以显示此内容
@我可以在这里看到问题，因为 login.getdata() 进行 API 调用，this.farmAccessdata = this.getFarmAccess.farmAccess();在实际收到 API 响应之前执行语句。
我遇到了同样的问题。出于某种原因，我的旧 cookie 值是从某个像鬼一样的地方获得的。它可能与浏览器的“智能”缓存有关，因为当我使用调试控制台获取值时，它仍然是最新的。最好的方法是实时执行代码而不是使用服务。我找到了一个解决方案，我现在正在使用拦截器。这将允许您在 (http) 请求和 (http) 响应期间注入额外的信息。与服务不同，注入器似乎每次都执行，而不是一些智能缓存。看到这个林

标签： angular cookies service

【解决方案1】：

如下改变你的登录服务功能

getData()  {
    return this.http.post(this.base_URL + "web_app/login/", JSON.stringify(this.login));

}

组件 ngOnInit 方法如下：

ngOnInit(): void {
    this.data = this.login.getData().subscribe(response =>{

        // Set the token & cookie from the component. Changes access_token ==> login.access_token
        // You may also need to inject cookieService in component as well
        this.login.access_token = response['access_token']; 

        console.log("received token " + this.login.access_token)
        this.cookieService.set( 'access_token', this.login.access_token );
        this.cookieValue = this.cookieService.get('access_token');
        console.log("set cookie value" + this.cookieValue);

        // Move this call in subscribe method
        this.farmAccessdata = this.getFarmAccess.farmAccess();
    });

}

【讨论】：