代码之家 › 专栏 › 技术社区 › J-man

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

angular-components angular-services session-state angular

1

J-man · 技术社区 · 9 年前

用户模型(带有显示所需字段的用户界面,如用户名、角色和人名)
用户服务(调用REST端点以从我们的身份验证系统获取数据的服务类

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

谢谢

1 回复 | 直到 9 年前

1

2

Pathik Vejani 5 年前

您可以构建一个能够留住用户的服务。我举了一个例子: 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 从组件中,确保使用getter。这将确保在更改当前值时始终获得该值。我在MenuComponent中访问当前用户名,因此代码如下所示:

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

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