Question

我们的项目有结构：

AppComponent
- 导航组件
- LoginComponent

用户使用调用Firebase的表单进行身份验证后，必须将用户重定向到只有登录用户才能访问的部分。

AccountComponent
- ProfileComponent
- FilesComponent

如您所见，帐户组件有两个孩子。

我正在寻找一种正确的方法来阻止非身份验证用户访问我网站的受保护区域，并且不知道我是否必须调用authService 在一个组件（appComponent？AccountComponent？OnInit中的一个组件？）或在路径定义中与CanActivate或CanActivateChild？

Answer 1

使用 CanActivate 路线卫士。

假设用户获得身份验证后的路由是 http://localhost:3000/#/dashboard

如果未对用户进行身份验证，则可以使用以下方法阻止仪表板路由（与AccountComponent及其子代相关）。

在你的路线上：

{ path: 'dashboard',
    canActivate: [ AuthService ],
    component: AccountComponent,
    children: [
      ProfileComponent,
      FilesComponent
    ]
  }

从您的身份验证服务实施CanActivate：

@Injectable()
export class AuthService implements CanActivate {


    isAuthenticated(): boolean{
        // auth logic
    }

    canActivate(): boolean{
        const isAuth = this.isAuthenticated();
        if(!isAuth){
        //if not authenticated do something. e.g redirect to login  page
            this._router.navigate(['','/login'])
        }
        return isAuth;
    }
}

Angular 2阻止非auth用户访问路由和子

1 个答案: