Ionic - потеря данных сервиса при обновлении страницы

Question

Я создал AuthService, который состоит из метода входа в систему, который устанавливает значение текущего пользователя:

public static currentUser: User;

    constructor() { }

    login(name: string, psw: string): Promise<boolean> {
        return new Promise((resolve, reject) => {
            if (name == "admin" && psw == "admin") {
                AuthService.currentUser =
                    {
                        name: name,
                        role: 0,
                        id: null
                    }
                resolve(true);
            }
            else if (name == "user" && psw == "user") {
                AuthService.currentUser =
                    {
                        name: name,
                        role: 1,
                        id: '123'
                    }
                resolve(true);
            }
            else {
                reject(false);
            }
        });
    }

На странице входа в систему ts:

     this.auth.login(this.user.name, this.user.psw).then(async success => {
          if (success) {
            this.navctr.navigateForward("/menu")
          }
    })

Наконец, встраница меню:

console.log(AuthService.currentUser)

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

РЕДАКТИРОВАТЬ: я решил проблему, сохранив значение с помощьюВстроенная локальная функция хранения ionic при успешном входе пользователя в систему,

localStorage.setItem("userName", AuthService.currentUser.name)
localStorage.getItem("userName")

Answer 1

Концепции одностраничного приложения

При перезагрузке страницы все теряется.

Приложение может запоминать вещи, когда вы перемещаетесь по "страницам" приложения, потому что на самом деле вы загружаете разные биты HTML на одну и ту же страницу.

Если вы перемещаетесьиз приложения или перезагрузите страницу браузера, затем JavaScript стирается и запускается снова.

Хранение данных

Решением для этого является использование механизма постоянного хранения.

Наиболее распространенным является хранение данных в cookie.

Вы также можете использовать различные доступные технологии баз данных. Есть много разных, и лучший из них зависит от мобильной платформы и от того, какой браузер вы используете. Для решения этой проблемы Ionic изобрели Ionic Storage. Это дает единый общий интерфейс для всех различных технологий. Вы просто говорите ему, чтобы сохранить данные, и он выбирает лучший доступный механизм хранения. Вы можете прочитать больше об Ionic Storage здесь:

• Хранение данных - Ionic Documentation

(На самом деле, я только что опубликовал это, а затем заметил вашобновление, в котором вы обнаружили localStorage. Это одна из технологий, которую оборачивает Ionic Storage. Вы должны использовать Ionic Storage поверх локального хранилища для лучшей совместимости между устройствами и платформами)

Безопасность

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

Например, на простом конце убедитесь, что вы не сохранили действительный пароль в файле cookie или в механизме хранения, поскольку он небезопасен.

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

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

Еслиэто всего лишь эксперимент, чтобы получить практический опыт работы с движущимися частями Ionic, тогда это нормально, но если вы планируете распространять это среди пользователей, вам следует серьезно рассмотреть решение стороннего производителя.

Answer 2

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

export var global = {
    loginState : false
};

Компонент:

import {global} from "./global";

loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password)
        .subscribe((response) => {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) => {
            console.log(error);
        });

}

В случае потери данных из-за полной перезагрузкиДля компонента рекомендуется использовать значение @input () для получения ссылки на данные из корневого компонента, который остается в памяти. Вот пример:

@Component({
 selector: 'hero-detail',
 templateUrl: './hero-detail.component.html'
})
export class DataDetailComponent {
 @Input() data: Data;
}

Корневой компонент может выполнять загрузку и сохранять, например, в localStorage или sqlite-database.