AuthGuard 显示空白页答案

【问题标题】：AuthGuard showing blank pageAuthGuard 显示空白页
【发布时间】：2020-07-03 19:49:57
【问题描述】：

在用户登录之前，我使用 AuthGuard 保护组件。AuthGuard 可以工作，但只要对组件进行更改并保存，页面就会自行刷新并变为空白，并且控制台中没有错误。

我查看过 Stack Overflow 上发现的类似问题，但问题不同，还没有找到解决方案。

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { AuthguardService } from './authguard.service';
import { MembersComponent } from './members/members.component';
import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
import { TicketsComponent } from './tickets/tickets.component';


export const routes: Routes = [
    { path: '', component: LoginComponent },
    {
        path: 'app-home', component: HomeComponent,
        canActivate: [AuthguardService],
        children: [
            { path: 'login', component: LoginComponent },
            { path: 'navigation', component: NavigationComponent },
            { path: 'member', component: MembersComponent },
            { path: 'subscription', component: SubscriptionsComponent },
            { path: 'ticket', component: TicketsComponent },
        ]
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [LoginComponent]

authguard.service.ts：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { LoginService } from './login.service';
@Injectable({
  providedIn: 'root'
})
export class AuthguardService implements CanActivate {
  constructor(private loginService: LoginService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    const token = this.loginService.getToken();
    if (!token) {
      this.router.navigate(['/']);
      return false;
    }
    return true;
  }
}

我希望新更改立即可见，每当进行新更改时，不必一直返回登录页面，而是再次登录，然后返回组件查看新更改。

【问题讨论】：

在 if (!token) 之前添加 debugger; 并验证它是否在 AuthGuard 中中断，token 的值等等......没有比调试更好的了！
另一件可能有帮助的事情是启用路由器跟踪，它在控制台中显示 Angular 路由器活动：RouterModule.forRoot(routes, { enableTracing: true })。
我试过你的建议，结果是：paste.pics/83db2975532185bc19b9d037e560d8ec paste.pics/9b31e9d3c7cc9d61729a2596185d5268
我想我找到了你的问题，看我的回答

标签： angular typescript canactivate auth-guard

【解决方案1】：

pathMatch: '完整'

您需要将 pathMatch: 'full' 添加到 path: '' 路由，否则 Angular 路由器将在应用程序加载时匹配它，而无需解释所有 URL。

{ path: '', component: LoginComponent, pathMatch: 'full' },

基本上pathMatch: 'full'表示需要匹配整个URL路径，被路由匹配算法消耗。

重复路线

另外，您有一条重复的路线指向LoginComponent... 我将删除AuthGuard 后面的app-home/login 路线，因为它需要您登录才能访问它：

{ path: '', component: LoginComponent, pathMatch: 'full' },
{
    path: 'app-home', component: HomeComponent,
    canActivate: [AuthguardService],
    children: [
        { path: 'login', component: LoginComponent }, // <= remove this route
        { path: 'navigation', component: NavigationComponent },
        { path: 'member', component: MembersComponent },
        { path: 'subscription', component: SubscriptionsComponent },
        { path: 'ticket', component: TicketsComponent },
    ]
}

【讨论】：

仍然不起作用.. 每次编译后仍然是空白页.. 我试图从 canActivate: [] 中删除 authguard，但它不起作用。我认为问题出在其他地方..
很遗憾听到...您的网址在重新加载后是否以 app-home/member 结尾？
不.. 它保持在同一个网址。我还确认，我在哪个组件上进行更改并不重要，编译后，我所在的 url 将自行刷新，页面变为空白。这是截图：paste.pics/9fdcff322b8f6273a0e5d0edefff6c35
您的最后一个屏幕截图显示 404 用于 Angular 编译源...这可能是问题所在！

【解决方案2】：

你可以这样使用它

export const appRoutes : Routes=[
{ path : '' , component : HomeComponent},
{ path : '',
    runGuardsAndResolvers:'always',
    canActivate:[AuthGuard],
    children:[
        { path: 'members', component: MembersComponent },
        { path: 'member/edit', component: MemberEditComponent }
    ]
},

{ path : '**' , redirectTo : '' , pathMatch : 'full'}

];

【讨论】：

【解决方案3】：

感谢大家的帮助，抱歉让您久等了！但我终于找到了我的问题的答案。好像是我一开始写的错别字..

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="./"

base href="./" 改为 base href="/"

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="body-app">
  <app-root></app-root>
</body>
</html>

【讨论】：