Блог

Я пытаюсь использовать ионное хранилище для сохранения и загрузки маркера аутентификации, который я использую для доступа к внутреннему API в своем приложении, но у меня возникли проблемы с получением значения из хранилища.

Я установил ионное хранилище (угловая версия), как указано на странице компонента GH: https://github.com/ionic-team/ionic-storage, используя приведенную ниже команду:

 npm install @ionic/storage-angular
 

Затем я импортировал службу хранения в свою глобальную службу, которую я создал, чтобы она была центром для всех глобальных значений в моем приложении:

 import { Storage } from '@ionic/storage-angular';

@Injectable()
export class Globals {
    private _authenticationToken: string;

    constructor(private storage: Storage) {
        this._authenticationToken = null;
        this.storage.create();        
    }

    (...)
 

Затем я создал метод saveToken, который будет хранить маркер аутентификации, уже определенный _authenticationToken другим методом, в ионном хранилище:

 public saveToken() : Promise<void>
{
    console.log("Saving token");
    console.log(this._authenticationToken);
    return this.storage.set("AuthenticationToken", this._authenticationToken)
        .then(valor => console.log("token saved."));
}
 

Когда я выполняю saveToken метод, результат таков (Игнорируйте красные строки, они из другого процесса, так как saveToken асинхронен):

Итак, мой токен был сохранен, и я могу видеть его значение на вкладке приложения в инструментах разработки Chrome:

Но тут возникает проблема. Когда я пытаюсь загрузить сохраненный токен, используя метод, описанный ниже, я получаю возвращенное значение null, как если бы токен не был сохранен. Я делаю это, когда приложение снова открывается, чтобы восстановить сеанс входа в систему.

 public loadToken() : Promise<void>
{
    return this.storage.get("AuthenticationToken")
        .then(v => {
            console.log("token loaded");
            console.log(v);
            this.setToken(v);
        });
}
 

Приведенный выше код приведет к появлению следующих сообщений, указывающих на то, что значение не было возвращено из хранилища.

Я запускаю приложение в браузере Chrome, использую ionic serve и подумал , что хранилище может быть сброшено после перезагрузки приложения, но я проверил вкладку «Приложение», и там есть маркер аутентификации.

Прежде чем я поделюсь возможным решением, а затем объясню:

 public loadToken(handler: (result?: any) => void) : void
{
    this.storage.get("AuthenticationToken")
        .then(v => {
            this.setToken(v);
            handler(v);
        });
}
...

this.loadToken((result?: any) => {
     // here your result
});
 

Это один из способов использования обратного вызова для получения результата без изменения вашей внутренней логики.

Причина, по которой вы ничего не получаете, заключается в том, что вы пытаетесь вернуть асинхронный результат (обещание), а затем(); он всегда будет возвращать вам значение null. Ваш результат находится внутри «тогда».

Другой способ был бы таким (но вам придется перенести логику внутрь, откуда вы ее потребляете):

 public loadToken() : Promise<any>
{
    return this.storage.get("AuthenticationToken");
}
...

const token = await loadToken(); // await is a syntactic sugar, it summarizes use of then(); on one line and you must wait for the result to return before continuing.
this.setToken(token);
 

С уважением.