Angular 2 防止非授权用户访问路由和子答案

【问题标题】：Angular 2 prevent non auth user access route and childAngular 2 防止非授权用户访问路由和子
【发布时间】：2017-04-16 04:02:28
【问题描述】：

有我们项目的结构：

应用组件
- 导航组件
- 登录组件

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

帐户组件
- 配置文件组件
- 文件组件

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

我正在寻找一种正确的方法来防止未经身份验证的用户访问我网站的受保护区域，但不知道我是否必须在组件中调用 authService （appComponent ？AccountComponent？组件之一的 OnInit ？）或者在路由定义中带有 CanActivate 或 CanActivateChild ？

【问题讨论】：

标签： angular firebase firebase-authentication

【解决方案1】：

使用 CanActivate Route Guard。

假设用户通过身份验证后您的路线是 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;
    }
}

【讨论】：

但不要说保护。你不保护客户端的任何东西，你只是隐藏。因此，请确保即使用户未经授权访问这些组件，他也无法从服务器检索任何数据，从而使页面无用
@lastWhisper 我认为这很明显。 :)
很遗憾没有
@lastWhisper BTW 我编辑了我的答案以包含您的评论。受保护 ==> 隐藏
@Mehari 不要被骗了，通常我们会隐藏一些用户无权访问的 UI 功能，但它与 UI 组件相关，而不是客户端或服务服务器端。如果您隐藏服务，则应删除端点或使其不可用。由于您基于身份验证逻辑中断服务，它不隐藏服务。使用安全服务，您防止未经授权的访问。