在每个页面上显示登录名和角色 Angular 2

Question

我是 angular 2 的新手；我有一个应用程序，我想在我应用程序的每个页面上的 header 组件中显示当前登录的用户名和分配的角色。我有：

user-model（具有必要显示字段的用户界面，如用户名、角色和人名）
user-service（服务 class 调用 REST 端点以从我们的身份验证系统

我可以轻松地从登录中获取用户信息，它看起来是有效的 JSON，但是我如何在每个页面（组件）上显示它而不必在每个组件上调用我的服务？理想情况下，在登录页面之后 header 或启动组件将加载用户 object 并将其注入或传递给所有后续组件，因此用户 object 被存储（因为缺少更好的word) 从一个组件到另一个组件，因此在应用程序加载时只需要 1 个 http 调用。

基本上我正在寻找最好的、最流线型的方法来解决这个问题。这似乎是一个常见的场景，但我读过的大多数写与此相关的答案的人都说要在每个组件中调用该服务。这是否意味着在每次页面加载时都会启动一个 API 端点调用？我们可以将此数据存储在 session 或 cookie 中吗？

谢谢！

Answer 1

您可以构建一项服务，让您的用户留住。我这里有一个例子：https://github.com/DeborahK/Angular-Routing

这是其中的一张：

import { Injectable } from '@angular/core';

import { IUser } from './user';
import { MessageService } from '../messages/message.service';

@Injectable()
export class AuthService {
    currentUser: IUser;
    redirectUrl: string;

    constructor(private messageService: MessageService) { }

    isLoggedIn(): boolean {
        return !!this.currentUser;
    }

    login(userName: string, password: string): void {
        if (!userName || !password) {
            this.messageService.addMessage('Please enter your userName and password');
            return;
        }
        if (userName === 'admin') {
            this.currentUser = {
                id: 1,
                userName: userName,
                isAdmin: true
            };
            this.messageService.addMessage('Admin login');
            return;
        }
        this.currentUser = {
            id: 2,
            userName: userName,
            isAdmin: false
        };
        this.messageService.addMessage(`User: ${this.currentUser.userName} logged in`);
    }

    logout(): void {
        this.currentUser = null;
    }
}

您的关键部分是“currentUser”属性。

注意：这是一个示例应用程序，因此用户信息是硬编码的。您需要检索实际数据。

更新：从组件访问 currentUser 时，一定要使用 getter。这将确保您在更改时始终获得当前值。我在我的 MenuComponent 中访问当前用户的名称，因此代码如下所示：

  get userName(): string {
    return this.authService.currentUser.userName;
  }

如果你想要整个用户实例，使用这样的东西：

  get user(): IUser {
    return this.authService.currentUser;
  }

在每个页面上显示登录名和角色 Angular 2

Display Login Name and Role on Every Page Angular 2

angular

session-state

angular-services

angular-components