Angular路由器从某些路线重定向到基本路线，但是当您刷新页面时，请自行修复

Question

出于某种奇怪的原因，仅对于某些路线，Angular路由器将用户重定向到基本URL。

听起来我的app-routing.module.ts是一个问题吗？

好吧，这是奇怪的问题开始的地方。

奇怪的问题＃1

仅在试图导航到/sterdegboard和/Achievements时才发生>/team-view

奇怪的问题＃2

如果我对代码进行更改或简单地刷新页面，则现在解决了问题，我现在可以同时访问/排行榜和/成就没有任何问题。如果我注销并登录，问题将返回。

奇怪的问题＃3

除了页面外，没有控制台错误或任何形式的错误，只是很快地闪烁，然后将我重定向到/路由（这是仪表板组件 loads`）

路由：

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        component: DashboardComponent,
        canActivate: [LoggedInGuard],
    },
    {
        path: 'team-view',
        component: TeamViewComponent,
        canActivate: [LoggedInGuard],
    },
    {
        path: 'settings',
        component: SettingsComponent,
        canActivate: [LoggedInGuard],
    },
    {
        path: 'leaderboard',
        component: LeaderboardComponent,
        canActivate: [LoggedInGuard],
    },
    {
        path: 'achievements',
        component: AchievementsComponent,
        canActivate: [LoggedInGuard],
    },
    { path: 'register', component: RegisterComponent },
    { path: 'login', component: LoginComponent },
];

标题代码：

<div class="menu-wrapper desktop-menu">
    <span class="menu-item" routerLinkActive="menu-item-active" [routerLinkActiveOptions]="{ exact: true }" routerLink="/">Dashboard</span>
    <span class="menu-item" routerLinkActive="menu-item-active" [routerLinkActiveOptions]="{ exact: true }" routerLink="/leaderboard">Leaderboard</span>
    <span class="menu-item" routerLinkActive="menu-item-active" [routerLinkActiveOptions]="{ exact: true }" routerLink="/achievements">Achievements</span>
    <span class="menu-item" routerLinkActive="menu-item-active" [routerLinkActiveOptions]="{ exact: true }" routerLink="/team-view">My Team</span>
    <span class="menu-item" routerLinkActive="menu-item-active" (click)="ToggleNotifications()"><mat-icon matBadge="4">notifications</mat-icon></span>
    <span class="menu-item" routerLinkActive="menu-item-active" (click)="SignOut()"><mat-icon>logout</mat-icon></span>
</div>

loggedinginguard：

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate(): Observable<boolean> | Promise<boolean> | boolean {
        const isLoggedIn = localStorage.getItem('jwt') !== null;

        if (!isLoggedIn) {
            console.log('Returning to login screen');
            this.router.navigateByUrl('login');
        }

        return isLoggedIn;
    }
}

我还注意到在角路由中似乎有些怪异的日志记录，这些路由似乎表明Angular Router正在强制重定向，但我不强迫知道为什么吗？：

GuardsCheckEnd(id: 11, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true)

Answer 1

将其放入app-routing.module.ts

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true }
    )
]

该应用程序将记录路由行为，以便您可以调查问题。

对我来说，我认为问题围绕奇怪的问题＃1 ，可能是路由器功能引起的。 router.navigate和router.navigatebyurl的操作并非全部相同。

Answer 2

这确实更适合作为评论，但是当我看到在前端应用中闪烁时，这是由于两件事之一：

1. 应用程序或组件状态的某些成员会影响渲染完成加载（页面开始加载 - ＆gt;挂钩更新状态 - ＆gt;页面开始渲染 - ＆gt;在渲染完成之前 - ＆gt; page再次开始渲染的状态更新）
2. 在内部触发一系列重定向的东西，

我知道它并不多。答案，但我建议您仔细检查排行榜和成就组件。如果可能的话，也许添加一个日志语句详细介绍组件状态。任何共享的逻辑或子组件似乎都是调试的好候选人。

如果您还没有准备好，请尝试打开开发工具并监视网络选项卡，以排除重定向选项。

Answer 3

您不应使用pathmatch：'Full'到处都是，它的效果不佳（尤其是如果您有嵌套路由）。 docs 为您提供最常见的用法示例。通常是重定向空字符串路由以避免其他问题是个好主意。

这样的事情应该有效：

const routes: Routes = [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'dashboard',
        },
        {
            path: 'dashboard',
            component: DashboardComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'team-view',
            component: TeamViewComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'settings',
            component: SettingsComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'leaderboard',
            component: LeaderboardComponent,
            canActivate: [LoggedInGuard],
        },
        {
            path: 'achievements',
            component: AchievementsComponent,
            canActivate: [LoggedInGuard],
        },
        { path: 'register', component: RegisterComponent },
        { path: 'login', component: LoginComponent },
    ];

Answer 4

刷新后，您的JWT令牌会怎样？也许您在某个过程中失去了JWT？

但是从您的描述中，看起来像Canactivate在login中启动，也许我们发现用户已登录，login component by默认将您移至/。

Canactivate应始终返回布尔值true/false，但是在这里我们只是naviage用户：

        if (!isLoggedIn) {
            console.log('Returning to login screen');
            this.router.navigateByUrl('login');
        }

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate(): Observable<boolean> | Promise<boolean> | boolean {
        const isLoggedIn = localStorage.getItem('jwt') !== null;

        if (!isLoggedIn) {
            console.log('Returning to login screen');
            this.router.navigateByUrl('login');
            return false;
        } else {
           return true;        
        }

    }
}