Question

我创建了一个服务，其中我在调用API来获取用户详细信息并在which python中添加接收到的信息，但是当我调用Session Storage时却得到空响应。

sessionStorage.getItem('username')

我还在getUserDetail(email: string, password: string) { this.httpClient.get<User[]>('http://localhost/user/user_login?email=' + email + '&password=' + password).pipe(map( (user) => { return user; } )).subscribe( (user: User[]) => { if (user['isUser'] == true) { sessionStorage.setItem('username', user['username']); sessionStorage.setItem('userid', user['userid']); sessionStorage.setItem('password', password); sessionStorage.setItem('email', email); this.router.navigate(['/homepage']); } else { console.log(user['error']); sessionStorage.setItem('login_error', user['error']); } } ); console.log('User From Login: ' + sessionStorage.getItem('username')); }中设置了变量，路由之后也没有获取值，但是刷新页面时，我可以正确获取值。

environment.ts文件代码。

environment

当我在服务中调用此api时。

export const environment = {
  production: false,
  baseURL: 'http://localhost/user/',
  credentialHeaders:
  {
    'email': sessionStorage.getItem('email'),
    'password': sessionStorage.getItem('password')
  }
};

我收到以下错误消息。

TypeError：无法读取null的属性“ length”

此错误适用于标题。

Answer 1

您正在通过调用httpClient.get()从服务器异步请求数据，但是您正在尝试通过在调用返回之前检查sessionStorage来同步获取值：

console.log('User From Login: ' + sessionStorage.getItem('username'));

您应该在subscribe方法内的行上方移动。

Answer 2

因为您getItem先于setItem。您的代码基本上是这样做的：

// send and asynchronous request here
        this.httpClient.get<User[]>(/* args */)
            .subscribe(/* stuff to be done AFTER request comes back,
                          including storing username in session storage */);

// and here we are outside the subscription, the line below gets executed in the same
// event loop tick that the request is sent, long before it comes back.
        console.log('User From Login: ' + sessionStorage.getItem('username'));

Answer 3

我正在使用environment设置会话值，但没有用，我认为环境仅加载一次，并且任何新值都没有在environment中初始化。

现在，我在共享的Service中设置我的值，并在各处获取该值，现在一切正常。

从sessionStorage.getItem（）Angular 7获取NULL值

3 个答案: