Angular2认证路由问题求助：卡片跳转首页及刷新重定向异常

嘿，作为Angular新手碰到这种路由守卫的问题太正常了！我来帮你搞定这两个问题：页面刷新时自动跳登录页的bug，以及实现认证后跳转首页（仪表盘）的需求。

先分析你当前守卫代码的问题 #

你现在的canActivate代码里直接订阅了store的isAuthenticated observable，然后返回这个observable。这里有两个坑：

1. 订阅是异步执行的，页面刷新时store的初始状态可能是false，这时候会触发跳登录，但等store从localStorage恢复认证状态后，跳转已经完成了——相当于误判了用户的认证状态。
2. 直接返回observable但没有正确处理路由激活的逻辑，守卫的返回值应该明确告诉Angular是否允许进入当前路由。

修正后的守卫代码 #

我们用RxJS的操作符来重构守卫逻辑，确保只取一次认证状态，并且正确处理重定向：

import { take, map } from 'rxjs/operators';

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
  return this.store.select(isAuthenticated).pipe(
    take(1), // 只获取一次最新状态，避免内存泄漏
    map(authenticated => {
      // 情况1：用户未认证，跳登录页并记录原访问路径
      if (!authenticated) {
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false; // 不允许进入当前路由
      }

      // 情况2：用户已认证，处理刷新或直接访问登录页的情况
      if (state.url === '/' || state.url === '/login') {
        // 跳转到仪表盘（你的首页）
        this.router.navigate(['/dashboard']);
        return false; // 重定向后不需要激活当前路由
      }

      // 情况3：用户已认证且访问的是合法路由，允许进入
      return true;
    })
  );
}

实现登录成功后跳转首页 #

在你的登录组件里，登录成功后根据returnUrl跳转——如果用户是从某个受保护页面被踢到登录页的，就跳回原页面；否则默认跳仪表盘：

import { ActivatedRoute, Router } from '@angular/router';

constructor(
  private authService: AuthService,
  private route: ActivatedRoute,
  private router: Router
) {}

login(credentials: any) {
  this.authService.login(credentials).subscribe(
    () => {
      // 获取登录前的目标路径，没有的话默认跳仪表盘
      const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/dashboard';
      this.router.navigate([returnUrl]);
    },
    (error) => {
      // 这里处理登录失败的逻辑，比如提示错误信息
      console.error('登录失败', error);
    }
  );
}

关键补充：确保刷新时store状态正确恢复 #

页面刷新时store会重置，所以你需要在应用初始化时从localStorage（或其他存储）恢复认证状态，比如在AppComponent的ngOnInit里：

ngOnInit() {
  const authToken = localStorage.getItem('authToken');
  if (authToken) {
    // dispatch一个action到store，更新isAuthenticated为true
    this.store.dispatch(new AuthActions.RestoreSession({ token: authToken }));
  }
}

这样刷新时，store会先恢复认证状态，守卫就能拿到正确的authenticated值，不会误跳登录页了。

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