Question

我目前正在使用Ionic 2构建一个应用程序，并使用存储插件来保存我的值，这些值几乎只是一个API令牌和用户配置文件，因为应用程序从API中提取所有数据。

我正在通过ionic serve测试应用程序，因为没有使用本机功能，但现在我遇到的问题是，每次我在存储中存储值时，在我重新加载应用程序之前无法访问该值令人讨厌，因为在用户登录后，他被重定向到需要API令牌的页面，直到我重新加载应用程序才能使用该令牌，这样整个事情就会陷入循环中。

Ionic Storage在浏览器中使用IndexedDB，当我使用Chrome Developer工具检查时，我可以看到这些值已存储。

我一直试图找出问题，但在重新加载应用程序之前找不到存储值的原因。

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { HttpClientService } from './http-client-service';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
    constructor(public events: Events, public storage: Storage, public http: HttpClientService) {
        //
    }

    login(user) {
        var response = this.http.post('login', {
            email: user.email,
            password: user.password,
        });

        response.subscribe(data => {
            this.storage.set('api_token', data.token);

            console.log('raw : ' + data.token); // shows the api token

            this.storage.get('api_token').then((value) => {
                console.log('storage : '+ value); // is empty...
            });
        });

        return response;
    };
}

编辑：我设法将问题追踪到运行异步的存储，导致令牌未添加到标头中。

createAuthorizationHeader(headers: Headers) {
    // this does add the header in time
    localStorage.setItem('api_token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vYXBpLndpaHplLmRldi9sb2dpbiIsImlhdCI6MTQ4MTE4MzQyOCwiZXhwIjoxNDgxMTg3MDI4LCJuYmYiOjE0ODExODM0MjgsImp0aSI6IjdlNTE1WUEwWmE4NWc2QjUiLCJzdWIiOiIxIiwidXNlciI6eyJpZCI6MX19.T4KpqgCB8xU79vKyeLG4CJ0OHLpVI0j37JKIBJ_0CC4');
    headers.append('Authorization', 'Bearer ' + localStorage.getItem('api_token'));

    // this does not add the header in time
    return this.storage.get('api_token').then((value) => {
        headers.append('Authorization', 'Bearer ' + value);
    });
}

getHeaders(path) {
    let headers = new Headers();
    headers.set('Accept', 'application/json');
    headers.set('Content-Type', 'application/json');

    if(!this.isGuestRoute(path)) {
        this.createAuthorizationHeader(headers);
    }

    return new RequestOptions({ headers: headers });
}

get(path: string) {
    return this._http.get(this.actionUrl + path, this.getHeaders(path))
        .map(res => res.json())
        .catch(this.handleError);
}

Answer 1

好的，看了ionic docs，我明白为什么你把它们放在彼此之下，因为它们也像文档中那样显示它。

但是Storage.set(key, value)：

返回：在设置值时解析的承诺

这意味着您无法按照使用方式使用它（因此，为什么他们在//or ....

添加评论

因为解析Promise是异步的。

如果你想使用像你当前正在使用它的值（这似乎有点奇怪，但可能是你测试值是否设置正确），你应该使用

this.storage.set('api_token', data.token).then(() => {
   this.storage.get('api_token').then((value) => {
       console.log('storage : '+ value); // is empty...
    });
});

console.log('raw : ' + data.token); // shows the api token

如果您想了解更多有关这种情况发生的信息，请查看此SO答案（我更喜欢第二个）Asynchronous vs synchronous execution, what does it really mean?

离子2 - 存储总是空的，直到重新加载应用

1 个答案: