CanActivate 守卫在初始加载时重定向到/，路由器出口不呈现答案

【问题标题】：CanActivate guard redirects to / on initial load, router-outlet does not renderCanActivate 守卫在初始加载时重定向到/，路由器出口不呈现
【发布时间】：2020-03-24 20:08:58
【问题描述】：

我有一个带有 AuthGuard 的 SPA。如果使用未记录页面重定向错误页面，则重定向特定路由。现在。

用户未登录
致电/dashboard 和Authgurad 重定向/error?returnUrl=/dashboard
用户致电/login?key=112233
登录页面订阅AuthService并创建用户令牌并重定向/dashboard
在渲染 /dashboard 之前触发 AuthGuard 和 AuthGurad 让他们一切正常
/dashboard 正常渲染
用户想要导航/claim/search page
路由器更改页面 URL 但router-outlet 不呈现重定向组件
如果用户刷新窗口浏览器页面正常工作，否则SPA不工作

我在步骤 8,9 中的问题

我的路线：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardPageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'claim',
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  },
  {
    path: 'login',
    component: LoginPageComponent,
  },
  {
    path: 'error',
    component: ErrorPageComponent,
  },
  {
    path: '**',
    component: ErrorPageComponent,
  }
];

登录页面：

ngOnInit() {
    this._returnUrl = this._route.snapshot.queryParams['returnUrl'] || '/';
    this._encryptedKey = this._route.snapshot.queryParams['key'];
    this._authenticationService.login(this._encryptedKey)
      .subscribe(
        data => {
          this._router.navigate([this._returnUrl]);
        });
  }

认证服务：

public get isLogged(): boolean {
    return !!this.currentUserSubject.value;
}
public login(encryptedKey: string) {
    return super.httpPostModel(User, environment.apiService.endPoints.user.login, { key: encryptedKey }).pipe(map(user => {
        sessionStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        return user;
    }));
}

身份验证

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this._authenticationService.isLogged) {
        return true;
    }
    this._router.navigate(['/error'], { queryParams: { returnUrl: state.url } });
    return false;
}

【问题讨论】：

标签： angular routing auth-guard

【解决方案1】：

在您的路由中，您还需要为父组件（声明组件）指定组件属性。

试试这个：

{
    path: 'claim',
    component: ClaimPAgeComponent,
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  }

【讨论】：

【解决方案2】：

对于无组件路由（没有路由器出口）你可以使用canActivateChild而不是canActivate，我建议你添加一个ClaimComponent仅内容

<router-outlet></router-outlet>

并将路线更改为

{
 path: 'claim',
 component: ClaimComponent, // add this
 canActivate: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},

在无组件路由的情况下，canActivateChild 在任何子路由被激活之前运行：

{
 path: 'claim',
 canActivateChild: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},

【讨论】：