英文:
Making a page that appears only upon first time opening the app
问题
以下是翻译好的代码部分：
在我的应用中，我希望用户在启动应用时看到欢迎页面，然后单击页面上的按钮以转到登录并继续使用应用程序... 下次打开应用时，应用程序不会显示启动屏幕，而是直接转到登录或主屏幕... 我已经创建了一个存储服务，用于保存页面是否已经被查看的状态，还有一个页面守卫，根据该状态进行重定向...
但现在我遇到了一个问题，我的应用程序总是跳过启动页面，直接转到登录页面，当我尝试登录时，它停留在这个页面... console.log 显示状态已设置为 'done'...
如果有人能找出我做错了什么，以下是我的代码...
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);
}
});
});
}
}
这是你提供的代码的中文翻译。如果需要更多的帮助或代码，请随时提出。
英文:
In my app I want the user to see this startup/welcome page when the app launches and then click a button on it to go to login and continue using the app… and next time he opens the app the app doesn't show the startup screen and goes straight to the login or home screen... I have made a storage service that saves a state if the page has been seen and a page guard that redirects based on the state...
But now I have an issue that my app keeps skipping the startup page and goes straight to login and when I try to log in it stays on this page… the console.log show that the state is set to 'done'…
here is my code if anyone can figure out what I did wrong...
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],
},
];
this is the code of 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);
}
}
this is the 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);
}
});
});
}
}
If I have to provide more code, feel free to comment bellow and I'll add more... I trully don't know where my mistake is 
答案1
得分: 1
You can use canMatch to check on the same patch, and you don't need to do redirects
{
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],
},
英文:
You can use canMatch to check on the same patch, and you don't need to do redirects
{
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],
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论