Angular 5中canActivate失效：routerLink跳转路由后AuthGuard重定向至登录页

我之前帮很多刚接触Angular路由守卫的开发者排查过类似的问题，你遇到的情况其实是几个常见坑的叠加——先帮你拆解核心原因，再给出针对性的解决方案：

为什么不用localStorage时状态会丢失？ #

Angular的单例服务在SPA路由切换时本来就不该丢失数据，出现这个问题大概率是以下几个原因之一：

1. 服务不是真正的单例 #

如果你的登录状态管理服务（比如AuthService）被错误地在多个模块中声明了providers，或者没有使用@Injectable({ providedIn: 'root' })装饰器，Angular会为每个模块创建一个独立的服务实例。路由切换时，AuthGuard可能拿到的是一个新的服务实例，自然读不到之前的登录状态。

2. 错误使用了href而非routerLink #

如果你的导航链接用的是<a href="/xxx">而不是<a routerLink="/xxx">，点击时会触发浏览器的页面刷新，整个应用会重新初始化，内存中的服务状态会被清空——这就能解释为什么用localStorage就正常（因为它是持久化存储，刷新后还能读取），而内存状态会丢失。

3. AuthGuard没有实时检查状态 #

如果你的AuthGuard只在初始化时读取一次登录状态，而不是在每次canActivate调用时实时检查，那即使服务状态更新了，守卫也会用旧的判断逻辑，导致错误跳转。

针对性解决方案 #

步骤1：确保AuthService是单例 #

修改你的AuthService，使用根注入的方式保证单例：

@Injectable({
  providedIn: 'root' // 关键：让Angular在整个应用中只创建一个实例
})
export class AuthService {
  private isLoggedIn = false;

  login() {
    // 登录逻辑...
    this.isLoggedIn = true;
  }

  getIsLoggedIn(): boolean {
    return this.isLoggedIn;
  }
}

同时，要确保不在任何其他模块的providers数组中再次声明这个服务。

步骤2：修复AuthGuard的状态检查逻辑 #

让AuthGuard在每次路由跳转时都实时读取最新的登录状态：

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | boolean {
    // 每次路由跳转都实时检查当前状态
    if (this.authService.getIsLoggedIn()) {
      return true;
    }
    // 未登录时跳转到登录页，同时保存当前路由以便登录后跳转回来
    return this.router.createUrlTree(['/login'], {
      queryParams: { returnUrl: state.url }
    });
  }
}

步骤3：检查所有导航链接的写法 #

把所有页面内的导航链接都改成routerLink：

<!-- 正确写法：SPA跳转，不会刷新页面 -->
<a routerLink="/dashboard">仪表板</a>
<a routerLink="/profile">个人中心</a>

<!-- 错误写法：会触发页面刷新，清空内存状态 -->
<!-- <a href="/dashboard">仪表板</a> -->

步骤4：确保登录状态正确同步 #

在登录成功后，一定要调用AuthService的方法更新状态，比如：

// 登录组件中的登录方法
onLogin() {
  // 调用登录API...
  this.authService.login();
  // 跳转到目标页面（比如之前保存的returnUrl）
  const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/dashboard';
  this.router.navigate([returnUrl]);
}

为什么localStorage能解决问题？ #

因为localStorage是浏览器的持久化存储，即使页面刷新（比如误操作使用了href），也能从localStorage中读取到之前保存的登录状态。但这只是一个临时的 workaround，核心还是要解决SPA路由跳转时的状态保持问题，毕竟内存状态的读写效率更高，也更符合Angular的单例服务设计思路。

内容的提问来源于stack exchange，提问作者David Santos Gonçalves