Question

从 sessionStorage.getItem() 获取 NULL 值 Angular 7

2019-07-02

2929

angular

我创建了一项服务，在其中调用 API 来获取用户详细信息，并将收到的信息添加到 Session Storage 中，但是当我调用 sessionStorage.getItem('username') 时，响应中获取的是 null。

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 中设置了变量，在路由后也没有获取值，但是当我刷新页面时，我可以正确获取值。

environment.ts 文件代码。

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

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

this.httpClient.get<List[]>(this.baseURL + 'data_list/get_all_list', { headers: environment.credentialHeaders })

我收到以下错误。

TypeError: Cannot read property 'length' of null

此错误针对标头。

Answer 1

因为您在 setItem 之前先 getItem 。您的代码基本上执行了以下操作：

// 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 2

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

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

您应该将上面的行移到订阅方法内。

Answer 3

我之前使用 environment 来设置会话值，但它不起作用，我认为环境只加载一次，并且任何新值都不会在 environment 中初始化。

现在我在共享 Service 中设置我的值并在各处获取该值，现在它运行良好。