Question

我的应用路由器文件定义了以下内容

export const router: Routes = [
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
},
{
    path: 'home',
    canActivate: [AuthGuard],
    component: LandingPageComponent
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: 'register',
    component: RegisterComponent
},
{
    path: '404',
    component: PageNotFoundComponent
},
{
    path: '**',
    component: PageNotFoundComponent
}]

当我尝试导航到URL http://localhost:4200/home时，AuthGuard会进入，页面会重定向到http://localhost:4200/login页面。

但是，当我使用网址http://localhost:4200浏览redirectTo时，它将直接打开http://localhost:4200/home页面，而不是http://localhost:4200/login页面。

应该调用AuthGuard并重定向到loginPage，对吧？

关于以下修改的路由定义，尝试导航到http://localhost:4200的用户应重定向到http://localhost:4200/login，但它再次打开了http://localhost:4200/home

{
    path: '',
    canActivate: [AuthGuard],
    component: LandingPageComponent
}

这是Angular 6的错误吗？感谢所有帮助/指针。

我的auth.guard.ts文件如下

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (localStorage.getItem('currentUser')) {
        // logged in so return true
        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

尝试删除斜杠：

{
    path: '',
    redirectTo: 'home',    //<- No slash here
    pathMatch: 'full'
},

如果这样做没有帮助，请尝试打开路由跟踪，以查看是否提供了有关为何未执行防护的信息。

canActivate无法在Angular中使用重定向的路由

1 个答案: