0

所以我已经阅读，但没有找到解决我的问题的方法。我的问题正如我的标题所要求的那样。

这是我的问题，我创建了 2 个组件（NavbarComponent 和 HomepageComponent）。NarbarComponent 嵌套在 AppComponent 中并处理身份验证，而 HomepageComponent 是启用路由的组件和应用程序的默认页面。

我想要做的是能够使用像 Auth0 这样的身份验证服务通过单击导航栏中的登录按钮（NavbarComponent）来对用户进行身份验证，然后在主页（HomepageComponent）上呈现他/她的个人资料。反之亦然，当我单击注销按钮时，应该删除用户的个人资料内容。

我尝试配置一些架构，但无济于事。首先，我尝试使用共享服务将 NavbarComponent 转换为 HomepageComponent，但它仅在重新加载页面时更新 HomepageComponent。

我尝试在 AppComponent 和 NavbarComponent 之间使用共享服务，然后使用@Input()从父级传输到子级，即 HomepageComponent。

然后我在 AppComponent 和 HomepageComponent 之间运行共享服务时尝试了从 NavbarComponent 到 AppComponent 的@Output()和 EventEmitter。

任何信息或见解将不胜感激！！

更新

主页组件

import { Component, OnInit } from '@angular/core'
import { Authenticated } from '../definitions/authenticated'
import { AuthCheckService } from '../shared/auth-check.service'

@Component({
  selector: 'afn-homepage',
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit{

  private authenticated: Authenticated;
  isAuthenticated: boolean;
  profile: any;

  constructor(public authCheckService: AuthCheckService) { }

  ngOnInit() {
    this.authCheckService.getAuthenticated().subscribe(authenticated => {
      console.log('Receiving auth info in home component from navbar component');
      this.authenticated = authenticated;
      this.isAuthenticated = this.authenticated.isAuthenticated;
      this.profile = this.authenticated.profile;
    });
  }

}

我试着在这里做一个plunker。我无法加载它，但它确实包含大部分代码和 AuthService 的模拟。

4

2 回答 2

0

您需要将服务注入到导航栏和主页组件中。当用户单击导航栏上的登录按钮时，调用服务上的 setter 将做三件事：

  1. 执行身份验证
  2. 将用户的凭据存储在服务的类变量（例如用户）中
  3. 使用 EventEmitter，发出一个携带用户对象的事件

此外，在服务中定义一个 getter，它将返回变量 user 的值。

主组件在构造函数中注入相同的服务实例。订阅服务的发射器以在用户注销或重新登录时获取通知。在方法 ngOnInit 中，调用服务上的 getter 以获取用户的值。然后发出 http 请求以获取用户的个人资料数据。

于 2017-05-29T19:28:55.057 回答
0

我猜你想要的是可以在这个应用程序中使用的东西.. https://angularhunt.com

请在https://github.com/aviabird/angularhunt查看源代码。它建立在带有 Redux(ngrx/store) 的 Angularfire2 之上，用于状态管理。所以你需要先了解 redux 工作流程。如果您已经知道这一点，那么这应该是一个很好的参考。我会看看我是否可以在没有 redux 方式的情况下拉出一个。

于 2017-05-29T04:28:28.427 回答