Angular 6 : 空路径绕过auth guard

Question

我正在尝试使用 Angular 路由器，但我在空路径上遇到了问题。这是我的路线：

const routes: Routes = [

    { path: 'feed', loadChildren: './feed/feed.module#FeedModule', canLoad: [AuthGuardService] },
    { path: 'login', component: LoginPage },
    { path: 'register', component: RegisterPage },
    { path: '', redirectTo: '/feed', pathMatch: 'full' },
    { path: '**', redirectTo: '/' }
];

我的 AuthGuardService 有一个方法 canLoad，它总是 returns false 并重定向到“/login”路径：

...
@Injectable()
export class AuthGuardService implements CanLoad {
  constructor(private router: Router) {
  }
  canLoad(route: Route): boolean {

    this.router.navigate([ '/login' ]);
    return false;
  }
}

当我转到 'localhost:4200/feed' 时，我被重定向到“/login”。

但是如果我转到 'localhost:4200/'，身份验证守卫将被忽略并显示我的提要模块的组件。

你知道为什么吗？

谢谢！

Answer 1

我的方案中有一个工作代码。检查这个，如果它可以帮助你。

您可以使用 canActivate 而不是 canLoad。

canActivate 用于防止未经授权的用户
canLoad用于防止app整个模块

在下面的示例中，如果您想改用 canLoad，可以将 canActivate 替换为 canLoad。

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@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;
    }
}

在写路由的时候，你可以像下面这样定义。

{ path: 'newLeaveRequest', component: NewLeaveRequestComponent, canActivate: [AuthGuard]},
{ path: 'pastLeaveRequests', component: PastLeaveRequestComponent, canActivate: [AuthGuard]},

在app.module.ts 在提供者中定义 AuthGuard。

Answer 2

我已经解决了我的问题，很抱歉延迟了：我需要使用一个组件并使用 canActivate 来加载子模块

{
    path: 'feed',
    canActivate: [ AuthGuard ],
    component: FeedComponent,
    children: [
        {
      path: '',
      loadChildren: () => FeedModule
}]}

儿童延迟加载也可以！

干杯！

Angular 6 : 空路径绕过auth guard

Angular 6 : Empty path bypass auth guard

angular-routing

angular

auth-guard