Angular 8 - 空路由导航到不正确的组件

Question

我用 app.routing.ts 文件设置了一个 Angular 2 应用程序，如下所示：

     // User Pages
    { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
    { path: 'notifications', component: NotificationsComponent, canActivate: [AuthGuard] },

    // Client Pages
    { path: 'clients', loadChildren: () => import('./clients/clients.module').then(mod => mod.ClientModule) },

    // Auth pages
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'register/:token', component: RegisterComponent },
    { path: 'forgottenPassword', component: ForgottenPasswordComponent },
    { path: 'forgottenPassword/:token', component: ForgottenPasswordComponent },

    // Error pages
    { path: 'forbidden', component: ForbiddenComponent },
    { path: 'maintenance', component: MaintenanceComponent },

    // otherwise redirect to 404
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '/404' }

现在由于某种原因，一切都按预期工作，除了来自基本路线。当我访问http://localhost:4200 时，它会重定向到http://localhost:4200/login。虽然我确实有代码可以在用户未登录时将用户重定向到登录页面，但我已经验证这没有被调用。

当我尝试导航到应用程序的根目录时，路由器跟踪显示以下内容：

platform-browser.js:301 Router Event: NavigationStart
platform-browser.js:292 NavigationStart(id: 6, url: '/')
platform-browser.js:292 NavigationStart {id: 6, url: "/", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:301 Router Event: RoutesRecognized
platform-browser.js:292 RoutesRecognized(id: 6, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:292 RoutesRecognized {id: 6, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: GuardsCheckStart
platform-browser.js:292 GuardsCheckStart(id: 6, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:292 GuardsCheckStart {id: 6, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: ChildActivationStart
platform-browser.js:292 ChildActivationStart(path: '')
platform-browser.js:292 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: ActivationStart
platform-browser.js:292 ActivationStart(path: '')
platform-browser.js:292 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: NavigationCancel
platform-browser.js:292 NavigationCancel(id: 6, url: '/')
platform-browser.js:292 NavigationCancel {id: 6, url: "/", reason: "Navigation ID 6 is not equal to the current navigation id 7"}
platform-browser.js:301 Router Event: NavigationStart
platform-browser.js:292 NavigationStart(id: 7, url: '/login')
platform-browser.js:292 NavigationStart {id: 7, url: "/login", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:301 Router Event: RoutesRecognized
platform-browser.js:292 RoutesRecognized(id: 7, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:292 RoutesRecognized {id: 7, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: GuardsCheckStart
platform-browser.js:292 GuardsCheckStart(id: 7, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:292 GuardsCheckStart {id: 7, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: ChildActivationStart
platform-browser.js:292 ChildActivationStart(path: '')
platform-browser.js:292 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: ActivationStart
platform-browser.js:292 ActivationStart(path: 'login')
platform-browser.js:292 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: GuardsCheckEnd
platform-browser.js:292 GuardsCheckEnd(id: 7, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } , shouldActivate: true)
platform-browser.js:292 GuardsCheckEnd {id: 7, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot, shouldActivate: true}
platform-browser.js:301 Router Event: ResolveStart
platform-browser.js:292 ResolveStart(id: 7, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:292 ResolveStart {id: 7, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: ResolveEnd
platform-browser.js:292 ResolveEnd(id: 7, url: '/login', urlAfterRedirects: '/login', state: Route(url:'', path:'') { Route(url:'login', path:'login') } )
platform-browser.js:292 ResolveEnd {id: 7, url: "/login", urlAfterRedirects: "/login", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: NavigationCancel
platform-browser.js:292 NavigationCancel(id: 7, url: '/login')
platform-browser.js:292 NavigationCancel {id: 7, url: "/login", reason: "Navigation ID 7 is not equal to the current navigation id 8"}
platform-browser.js:301 Router Event: NavigationStart
platform-browser.js:292 NavigationStart(id: 8, url: '/')
platform-browser.js:292 NavigationStart {id: 8, url: "/", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:301 Router Event: ActivationEnd
platform-browser.js:292 ActivationEnd(path: 'login')
platform-browser.js:292 ActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: ChildActivationEnd
platform-browser.js:292 ChildActivationEnd(path: '')
platform-browser.js:292 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: RoutesRecognized
platform-browser.js:292 RoutesRecognized(id: 8, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:292 RoutesRecognized {id: 8, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: GuardsCheckStart
platform-browser.js:292 GuardsCheckStart(id: 8, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:292 GuardsCheckStart {id: 8, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.js:301 Router Event: ChildActivationStart
platform-browser.js:292 ChildActivationStart(path: '')
platform-browser.js:292 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: ActivationStart
platform-browser.js:292 ActivationStart(path: '')
platform-browser.js:292 ActivationStart {snapshot: ActivatedRouteSnapshot}
platform-browser.js:301 Router Event: NavigationCancel
platform-browser.js:292 NavigationCancel(id: 8, url: '/')
platform-browser.js:292 NavigationCancel {id: 8, url: "/", reason: "Navigation ID 8 is not equal to the current navigation id 9"}

谁能帮我理解这里发生了什么？

访问http://localhost:4201/dashboard 按预期工作。访问http://localhost:4201 没有，我被重定向到http://localhost:4201/login

编辑：auth.guard.ts 按要求：

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser) {
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['login'], { queryParams: { returnUrl: state.url } });
        return false;
    }
}

Answer 1

我认为是 AuthGuard 的问题。 http://localhost:4200 将您重定向到 http://localhost:4200/dashboard 和 AuthGuard 重定向到登录

Answer 2

事实证明，在我的模块化路由中，有一条特定的路由配置错误，因此路由器匹配的是该特定路由，而不是我所期望的。修复此路由配置解决了该问题。