Question

我尝试在用户从'/ login'登录到仪表板'/'后将logout元素添加到菜单中，

首先，我尝试将auth服务添加到仪表板组件并更新组件初始化（ngOnInIt）上的用户变量

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <span id="optiona">12</span><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <span id="optionb">30</span><br /><br />

Sum
<span id="totalsum"></span>

但是我的根组件在从'/ login'页面重定向后没有执行ngOnInit，因此也没有检索到我的用户名。

第二次，我尝试使用Observable进行更改检测，在auth服务中使this.authService.getUser().subscribe( (data) => { if (data !== null) { this.username = data.local.username; } });变量Observable

username

}

在我的信息中心中，我注入了此身份验证服务，并调用了user$: Observable<string> = this.getUser().map( data => { if (data !== null) { return data.local.username; } }); getUser() { return this.http.get('/api/user') .catch( (error: any) => { return Observable.throw( error.toString() || ' :server error'); });

但我的结果是一样的，我不得不重新加载我的页面，以便在菜单中显示退出字符串。

这是我的第一个有棱角分明的个人项目，请告诉我任何noobie错误，并花些时间通过解释来启发我。谢谢

Answer 1

查看文档，其中介绍了如何通过服务进行通信：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

简而言之，创建一个Observable，使用Subject：

private user = new Subject();
public user$ = this.user.asObservable();

当您从后端收到用户时，请在您的观察点上致电next：

this.authService.login(val.email, val.password)
  .subscribe((result) => {
    console.log('User Logged in as: ', result);
    this.authService.user.next(result) // add this!
    //....
 });

在仪表板中，您只需听取更改：

constructor(...) {
  this.user$ = this.authService.user$;
}

并在模板中：

<ng-container *ngIf="user$ | async">
 ....
</ng-container>

有了这个，您必须记住，这不会在页面刷新时持续存在，因此您可能需要考虑使用localStorage组合，或者查看其他选项来存储状态。

Answer 2

看起来您可以使用routing guards，resolve或授权后卫。下面给出的解析器示例：此解析程序可帮助您在导航到新路径仪表板之前获取用户数据。

@Injectable()
export class UserResolver implements Resolve<User> {

    constructor(private http: HttpClient, private router: Router) {
    }

    public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<User> {
        return this.http.get('/api/user')
            .map(r => r.json() as User)
            .toPromise()
            .catch(e => this.handleError(e));
    }

    private handleError(e: Response): void {
        this.router.navigate(["/error" , e.status]);
    }
}

为组件配置解析器。

path:"dahsboard"
component: DashboardComponet,
resolve: {user: UserResolver }

在仪表板组件中，sunscribe用于路由和访问用户详细信息

  public ngOnInit(): void {
        this.route.params.subscribe((params: Params) => {
            let user: User= this.route.snapshot.data.User;

        });
    }

如何处理用户登录服务以获取用户信息和注销状态

2 个答案: