Как хранить данные при обновлении страницы под углом 2/4 - PullRequest
Новая
       19

Как хранить данные при обновлении страницы под углом 2/4

0 голосов
/ 30 октября 2018

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

Это мой файл Login.component.ts 

   btnlogin() {
    this.message = '';
    this.storage.clear();

    if (this.validate() == true) {
        this._enqService.FetchUserDetails(this.username, this.password).subscribe(userData => {
            if (userData.length == 0)
                this.message = " * Username/Password not correct";

            else {
                userData.forEach(item => {
                    this._loginService._userid = item.UserID;
                    this._loginService._username = item.UserName;
                    //if (this._loginService.selectedshopid == undefined || this._loginService.selectedshopid == 0) {
                    //    this.messages = '* Please Select a Shop';
                    //    return false;
                    //}
                    this._router.navigate(['/enquirydetails']);
                });
            }

        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });
    }
}
 validate(): boolean {
    if (this.username == '' || this.password == '' || this.username == undefined || this.password == undefined) {
        this.message = '* Please enter username/password';
        return false;
    }
    else
        return true;
}

Это мой logcomcomentent.ts 

       constructor(private router: Router, location: Location, private storage: 
     LocalStorageService)
    {
        this.location = location;
        router.events.subscribe((val) => {
            if (this.location.path() != '') {
                this.route = location.path();
            }
        });

    } 
    setUserName()
    {
        //alert('calling setusername');
        this.UserName = this.storage.retrieve('usernamevalue');
    }

    logout() {

        this.router.navigate(['Login']);
        this.storage.clear('boundvalue');
        this.storage.clear('uservalue');
        this.storage.clear();
        //alert(this.storage.retrieve('boundvalue'));
        //alert(this.storage.retrieve('uservalue'));
    } 
    //  ngOnInit() {
   //   this.router.navigate([''])
   //  }
}

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Я думаю, вы можете использовать "sessionstorage" или "localStorage" для хранения данных и получить их позже для вашего использования.

sessionStorage, localStorage и Cookies используются для хранения данных на стороне клиента. Каждый из них имеет свой собственный лимит хранения и срока годности. sessionStorage: похоже на localStorage, но истекает при закрытии браузера (не вкладка) Cookie: хранит данные, которые должны быть отправлены обратно на сервер с последующими запросами.

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

0 голосов
/ 30 октября 2018

Я предполагаю, что LocalStorageService - ваша собственная библиотека, поэтому я не учел это в ответе.

После того, как пользователь успешно вошел в систему, сохраните userId и userName в локальном хранилище следующим образом: 

userData.forEach(item => {
    this._loginService._userid = item.UserID;
    this._loginService._username = item.UserName;

    //save to localStorage
    localStorage.setItem(userId, item.UserID);
    localStorage.setItem(userName, item.UserName);

    this._router.navigate(['/enquirydetails']);
});

В вашем методе выхода из системы вы удаляете пользовательские значения из localStorage. 

logout() {

    this.router.navigate(['Login']);
    this.storage.clear('boundvalue');
    this.storage.clear('uservalue');
    this.storage.clear();
    // delete from localStorage
    localStorage.removeItem(userId);
    localStorage.removeItem(userName);
}

Чтобы проверить, вошел ли пользователь, я бы предложил использовать Route Guard. В рамках этого вы можете получить значения из localStorage и проверить, если пользователь вошел в систему. 

localStorage.getItem(userId);
localStorage.getItem(userName);

Вы можете узнать о Страже маршрута здесь: https://angular.io/guide/router#milestone-5-route-guards

Примечание: Выше приведен только пример, так как я не знаю о вашем полном заявлении. Надлежащая аутентификация пользователя с использованием sessionId / userHash должна быть сделана.

...