首页 文章

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

提问于
浏览 次
2

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

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

this.authService.getUser().subscribe(
       (data) => {
         if (data !== null) {
           this.username = data.local.username;
         }
       });

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

第二次，我尝试使用Observable进行更改检测，在auth服务中使 username 变量Observable

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');
});

}

在我的仪表板中，我注入了这个身份验证服务并调用 *ngIf="authService.user$ | async"

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

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

angular

2 回答

  • 0

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

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

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

    当您从后端收到用户时，请在您的observable上调用 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 组合，或者查看其他选项来存储状态 .

    回复于
  • 3

    看起来你可以使用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 }

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

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

        });
    }
    回复于

相关问题