代码之家 › 专栏 › 技术社区 › BZHNomad

角6:空路径旁路认证保护

auth-guard angular-routing angular

BZHNomad · 技术社区 · 6 年前

我正在尝试使用角度路由器,但我在空路径上遇到了一个问题。以下是我的路线:

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,该方法始终返回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/”,将忽略auth-guard,并显示提要模块的组件。

你知道为什么吗?

谢谢!

2 回复 | 直到 6 年前

Pardhu 6 年前

我的场景中有一个工作代码。检查一下这个,如果它能帮到你的话。

您可以使用canactivate来代替canload。

激活用于防止未经授权的用户
CAN负载 用于阻止应用程序的整个模块

在下面的示例中,您可以替换激活具有 CAN负载 ,如果您希望改用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。

BZHNomad 6 年前

我已经解决了我的问题,抱歉耽搁了: 我需要使用组件和canActivate来加载子模块

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

孩子们的懒惰装车也可以!

干杯!

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前