Состояние Angular 5 Ngrx потеряно при обновлении страницы браузера

Question

Я новичок в angular 5 и Ngrx, кое-как, как мне удалось реализовать функциональность входа в систему, как только вход в систему успешен, я беру пользователя на панель инструментов.Но если я обновлю страницу, пользовательское состояние будет потеряно.Как сделать пользовательское состояние постоянным даже при перезагрузке страницы?

Answer 1

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

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

Answer 2

Как сделать состояние пользователя постоянным даже при перезагрузке страницы?

as @ user184994 Упомянутое состояние NGRX сохраняется только в памяти.Если вы хотите, чтобы он сохранялся между обновлениями страницы, перейдите на LocalStorage или sessionStorage

localStorage и sessionStorage, чтобы выполнить то же самое и иметь тот же API, но с sessionStorage данныесохраняется только до тех пор, пока окно или вкладка не будут закрыты, в то время как при localStorage данные сохраняются до тех пор, пока пользователь вручную не очистит кеш браузера или пока ваше веб-приложение не очистит данные.

Я бы посоветовал вам перейти на @ ngx-pwa / local-storage Асинхронное локальное хранилище для Angular

Для Angular 5:

npm install @ngx-pwa/local-storage@5

Зарегистрируйте его в своемRootModule

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

Введите и используйте его

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

Использование

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});