Создание страницы, которая появляется только при первом открытии приложения

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

Но теперь у меня проблема, что мое приложение постоянно пропускает стартовую страницу и переходит прямо к входу в систему, и когда я пытаюсь войти, оно остается на этой странице… console.info показывает, что состояние установлено на «готово»…

вот мой код, если кто-нибудь может понять, что я сделал не так...

приложение-routing.module.ts:

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    canLoad: [AutoLoginGuard]
  },
  {
    path: '',
    redirectTo: 'startup',
    pathMatch: 'full'
  },
  {
    path: 'startup',
    loadChildren: () => import('./pages/startup/startup.module').then( m => m.StartupPageModule),
    canActivate:[FirstLoadGuard]
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule),
    canLoad: [AuthGuard],
  },
];

это код storage.service.ts:

export class StorageService {
  constructor(private storage: Storage) {
    this.initStorage();
    console.info('Init storage');
  }

  async initStorage() {
    await this.storage.create();
    console.info('Storage ustvarjen');
  }

  async setValue(key,value) {
    await this.storage.set(key, value);
    return true;
  }

  async getValue(key) {
    return await this.storage.get(key);
  }
}

это первая загрузка.guard.ts:

export class FirstLoadGuard implements CanActivate {
  constructor(
    private storageService: StorageService,
    private router: Router
  ) {}
  canActivate(route: ActivatedRouteSnapshot):  Promise<boolean>
  {
    return new Promise(resolve => {
      this.storageService.getValue('first_time').then((value) => {
        if (value !== null) {
          this.router.navigateByUrl('/login');
          console.info('guard if value: ', value);
          resolve(false);
        }
        else {
          this.storageService.setValue('first_time', 'done');
          resolve(true);
        }
      });
    });
  }
}

Если мне нужно предоставить больше кода, не стесняйтесь комментировать ниже, и я добавлю больше... Я действительно не знаю, где моя ошибка :(

Действительно, было бы полезно, если бы вы могли предоставить минимальный воспроизводимый пример в онлайн-редакторе кода, таком как Stackblitz

Cuzy 04.04.2023 09:31

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

Cuzy 04.04.2023 09:34

какую версию углового вы используете?

Chris 04.04.2023 09:35

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

weinde 04.04.2023 09:52

@weinde Ну, на самом деле это то же самое, вы пишете запись в localStorage, когда пользователь впервые заходит на страницу, и на основе этого вы можете перенаправить его при следующем посещении страницы.

Cuzy 04.04.2023 10:01

@Cuzy вот ссылка на stackblitz stackblitz.com/edit/angular-valxtn?file=src/app/app.module.t‌​s

weinde 04.04.2023 11:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать canMatch для проверки того же патча, и вам не нужно делать перенаправления

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./pages/startup/startup.module').then( m => m.StartupPageModule),
    canMatch: [() => localStorage.getItem('first_time') === null],
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule),
    canLoad: [AuthGuard],
  },

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

weinde 04.04.2023 11:42

@weinde, у тебя есть редирект в ./pages/startup/startup.module

Chris 04.04.2023 12:01

@weinde добавьте RouterModule.forRoot(..., { enableTracing: true }), чтобы увидеть, откуда идет перенаправление

Chris 04.04.2023 12:02

Нет, не знаю... может быть, страница автоматически перенаправляется после установки состояния?

weinde 04.04.2023 12:02

canMatch проверяет только триггерную навигацию

Chris 04.04.2023 12:07

Итак, я добавил этот код в RouterModule... какую часть я скопировал, чтобы вы могли увидеть? теперь в консоли много сообщений...

weinde 04.04.2023 12:14

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

weinde 04.04.2023 12:16

Неважно. Я понял это :) У меня была переадресация в каком-то другом файле ... ваш ответ сработал, и я принимаю его :) Большое вам спасибо :) Если бы я мог сейчас пригласить вас на пиво :)

weinde 04.04.2023 12:26

Хотя, когда я закрываю приложение на своем телефоне и запускаю его снова, я все еще вижу стартовую страницу...

weinde 04.04.2023 12:39

@weinde попробуй реализовать runGuardsAndResolvers

Chris 04.04.2023 12:47

Другие вопросы по теме