Ionic 制作仅在第一次打开应用程序时显示的页面

a14dhokn  于 2023-04-10  发布在  Ionic
关注(0)|答案(1)|浏览(159)

在我的应用程序中,我希望用户在应用程序启动时看到此启动/欢迎页面,然后单击其上的按钮以登录并继续使用应用程序......下次他打开应用程序时,应用程序不会显示启动屏幕并直接进入登录或主屏幕......我已经做了一个存储服务,如果页面已经被看到,它会保存一个状态,还有一个页面保护,它会根据状态重定向。
但现在我有一个问题,我的应用程序一直跳过启动页面,直接登录,当我尝试登录它停留在这个页面上... console.log显示状态设置为“完成”...
这是我的代码,如果有人能找出我做错了什么…

app-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.log('Init storage');
  }

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

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

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

这是first-load.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.log('guard if value: ', value);
          resolve(false);
        }
        else {
          this.storageService.setValue('first_time', 'done');
          resolve(true);
        }
      });
    });
  }
}

如果我必须提供更多的代码,请随时评论波纹管,我会添加更多...我真的不知道我的错误在哪里:(

vd8tlhqk

vd8tlhqk1#

您可以使用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],
  },

相关问题