制作一个只在第一次打开应用程序时出现的页面

Question

在我的应用程序中，我希望用户在应用程序启动时看到这个启动/欢迎页面，然后点击它上的一个按钮去登录并继续使用应用程序…下次他打开应用程序时，应用程序不显示启动屏幕，直接进入登录或主屏幕…我做了一个存储服务，如果页面已被看到，则保存状态和基于状态重定向的页面保护…

但现在我有一个问题，我的应用程序一直跳过启动页面，直接登录，当我试图登录它停留在这个页面…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);
}
});
});
}
}

如果我必须提供更多的代码，请随意在下面评论，我会添加更多…我真不知道我错在哪儿了

Answer 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],
},