Ionic 5 Angular如何通过Guard跳过登录页并解决启动闪屏问题

你的问题核心是Guard异步验证时路由已提前渲染登录页，导致关闭APP重开时出现1秒闪屏。以下是针对性的修复方案：

1. 调整路由结构，明确保护范围 #

原来的路由配置没有区分公开路由（登录页）和受保护路由，导致启动时可能先加载登录页，等Guard验证完成后再跳转。修改路由如下：

const routes: Routes = [
  // 公开路由：登录页不受Guard保护
  { path: 'login', component: LoginPage },
  // 受保护路由组：所有子路由需通过LoginGuard验证
  {
    path: '',
    canActivate: [LoginGuard],
    children: [
      { path: 'home', component: HomePage },
      // 默认重定向到首页
      { path: '', redirectTo: '/home', pathMatch: 'full' }
    ]
  },
  // 404重定向到根路径（由Guard处理）
  { path: '**', redirectTo: '' }
];

2. 修改LoginGuard逻辑，符合路由守卫设计 #

原来的Guard直接返回跳转URL，会导致路由先尝试加载父路由，再触发跳转。优化后让Guard只负责验证权限，路由跳转交给路由配置处理：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, UrlTree } from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable({ providedIn: 'root' })
export class LoginGuard implements CanActivate {
  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean | UrlTree> {
    const loggedIn = await this.storage.get('loggedIn');
    
    // 未登录：跳转到登录页
    if (loggedIn === null || loggedIn === 0) {
      return this.router.createUrlTree(['/login']);
    }
    
    // 已登录：允许访问受保护路由，路由会自动重定向到首页
    return true;
  }
}

3. 启动时先完成Storage初始化 #

Ionic Storage的初始化是异步的，如果启动时直接执行Guard的storage.get，可能会拿到初始的null值，导致误判。在AppComponent中先等待Storage就绪：

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(private storage: Storage, private router: Router) {
    this.initApp();
  }

  async initApp() {
    // 等待Storage初始化完成
    await this.storage.create();
    
    // 提前判断登录状态，直接跳转到对应页面
    const loggedIn = await this.storage.get('loggedIn');
    if (loggedIn === 1) {
      await this.router.navigate(['/home']);
    } else {
      await this.router.navigate(['/login']);
    }
  }
}

为什么原来的代码会闪屏？ #

1. 路由初始时没有明确的默认页，Guard的异步验证未完成前，路由可能先加载了登录页（如果登录页是默认路由的话）；
2. storage.get是异步操作，Guard需要时间拿到结果，这段时间内路由已经开始渲染页面，导致闪屏；
3. Guard直接返回跳转URL，会触发二次路由跳转，增加了页面切换的延迟。

内容的提问来源于stack exchange，提问作者shahid