Question

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

从localStorage进行身份验证的代码为：

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。

不确定出了什么问题。

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

.
.
.

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

Answer 2

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

service.ts 标头：任意

构造函数

header = localStorage ....

角服务中本地存储未刷新

2 个答案: