Angular 路由器无限循环与 canActivate / redirectTo

Question

I'm having trouble getting a redirect in my routing module working, and adding an AuthGuard in CanActivate complicates it even further. Here is a simplified router:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'secret',
    component: SecretComponent,
    canActivate: [ AuthGuard ]
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

With this current setup, I get some strange behavior. Every route is considered a child of the path: '' route, so going to '' brings you to '/home'. If I refresh the page, I go to '/home/home'. This goes for login as well - navigation to '/login' will actually take you to '/login/home'. If you refresh any of these pages after the extra '/home' has been tacked onto the end, it causes the page to error out.

The authguard is just another complication, what with it navigating the user around based on authentication status.

Things I have tried:

• Removing the authguard
• Changing the order of the path declarations
• Having only a single path + black path redirecting to it
• pathMatch: 'prefix'

I'm comparing this to some functioning production projects, example tutorials, etc. Everything seems to be in place. Not sure what's going wrong.

Answer 1

Try setting up your routes like this:

const routes: Routes = [
    { path: 'login', component: LoginComponent, },
    { path: 'home', component: HomeComponent, },
    {
        path: 'secret',
        component: SecretComponent,
        canActivate: [ AuthGuard ]
    },
    { path: '**', redirectTo: '/home' },
];

Don't redirect from '' just redirect from '**' . You don't seem to want anything to show if the path is just https://example.com/ , so don't include a route for that -- '**' will pick it up.