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

Question

我们的项目有结构:

• AppComponent
  • 导航组件
  • LoginComponent

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

• AccountComponent
  • ProfileComponent
  • FilesComponent

如您所见,帐户组件有两个孩子.

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

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