localstorage 没有在角度服务中刷新答案

【问题标题】：localstorage not getting refreshed in angular servicelocalstorage 没有在角度服务中刷新
【发布时间】：2019-04-26 22:17:03
【问题描述】：

我正在使用 angular 6 和 localStorage 来保存身份验证令牌。

从localStorage获取authtoken的代码是：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + JSON.parse(localStorage.getItem('userdetails')).token
  })
};

并将其用作

getCities() {
    return this.http.get<any>('http://myservice.com/api/cities', httpOptions);
  }

当我注销时，我正在清除 localStorage 并重定向到主页

localStorage.clear();
  this.router.navigate(['/']);

当我登录时，我将userdetails localStorage 项目设置为

this.loginService.login(obj)
            .subscribe(
                auth => {
                                               localStorage.setItem('userdetails', JSON.stringify(auth));
                    this.router.navigate(['authentication/auth/redirectpage']);

                }
            );

我正在保存的身份验证对象是这样的：

{"fullname":"Test User","username":"TestUser1","authlevel":"Q","designation":"Tester 1","token":"First_Login_Token"}

当我第一次登录时，一切正常。当我注销时，userdetails localStorage 元素被破坏（在 Chrome DevTools 的应用程序选项卡中检查本地存储时。

当我用不同的用户重新登录时，我的userdetails 正在正确更新为

{"fullname":"Test User 2","username":"TestUser2","authlevel":"R","designation":"Tester 2","token":"Second_Login_Token"}

但是

locationService 中的localStorage.getItem('userdetails')).token 仅返回First_Login_Token。

如果我重新加载页面，它会正确占用Second_Login_Token。

不确定出了什么问题。

【问题讨论】：

标签： javascript angular local-storage angular-services

【解决方案1】：

好的，我找到了问题。

const httpOptions

是罪魁祸首。

我已将它设为类中的变量，并在每个方法中设置它，例如

export class LocationService {

  httpOptions: any;

  constructor(private http: HttpClient) {
  }


  getcities() {
    this.httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + JSON.parse(localStorage.getItem('userdetails')).token
      })
    };
    return this.http.get<any>('http://myservice.com/api/cities', this.httpOptions);
  }

.
.
.

现在，一切都很好。还是谢谢！！！

【讨论】：

【解决方案2】：

我遇到了几乎相同的问题，发现我在声明部分调用了 localStorage，这就是它为空的原因。你应该先声明变量，然后如果你有 localstorage 在构造函数之后调用它。谢谢拉克什曼！

service.ts 标题：任意

构造函数

header = localStorage....

【讨论】：