angular 服务中的本地存储未刷新

Question

我正在使用 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"}

但是

localStorage.getItem('userdetails')).token 仅在 locationService returns First_Login_Token 中。

If i reload the page, it is properly taking Second_Login_Token.

不确定出了什么问题。

Answer 1

好的，我找到问题了。

const httpOptions

是罪魁祸首。

我已将它设为 class 中的变量，并在

等每个方法中设置它

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);
  }

.
.
.

现在，一切都很好。无论如何谢谢！！！

Answer 2

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

service.ts header：任意

构造函数

header = 本地存储....

angular 服务中的本地存储未刷新

localstorage not getting refreshed in angular service

javascript

local-storage

angular-services

angular