node.js - Angular JWT 配置文件用户(获取 json 字段)

Question

我有一个 gettProfile() 方法，其中包含以下代码:

gettProfile(){
    var headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type','application/json');  
    let options = new RequestOptions({headers: headers});  
    return this.http.get('http://localhost:3000/api/profile', options)
      .map(res => res.json()); //res.json() localStorage.getItem('students')
  }

在这段代码中，当我编写 console.log(this.authToken); 它显示正确的 JWT token 。但是当我将此数据传递给我的 ProfileComponent 时，它说:

ERROR TypeError: Cannot read property 'name' of undefined

Profile.component.ts 代码如下:

  export class ProfileComponent implements OnInit {  
        students: Object;
          constructor(private authService:AuthService,  private router:Router) { }

          ngOnInit() {  
            this.authService.gettProfile().subscribe(profile => 
            {   
              this.students= profile.students;
            },
            err => {
              console.log(err);
              return false;    
            });
          }
}

Profile.component.html代码:

<div class="col-md-6 col-md-offset-3">
    <h1>Hi {{students.name}}!</h1>
    <p>You're logged in!!</p>
    <h3>Registered user detail:</h3>
    <ul>
        <li *ngIf="students">
            {{students.email}} ({{students.surname}} {{students.address}})
        </li>
    </ul>
    <p><a [routerLink]="['/login']">Logout</a></p>
</div>

当我查看 LocalStorage 时:

students:
{"id":"5960fa785017042b9c54f05c","name":"aaa","surname":"aaa","email":"aaa@gmail.com","address":"aaaa","phoneNumber":"aaaa"}
token: JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyIkX18iOnsic3RyaWN0TW9kZSI6dHJ1ZSwic2VsZWN0ZWQiOnt9LCJnZXR0ZXJzIjp7fSwiX2lkIjoiNTk2MGZhNzg1MDE3MDQyYjljNTRmMDVjIiwid2FzUG9wdWxhdGVkIjpmYWxzZFeiYWN0aXZlUGF0aHMiOnsicGF0aHMiOnsicGFzc3dvcmQiOiJpbml0IiwiZW1haWwiOiJpbml0IiwiX192IjoiaW5pdCIsInBob25lTnVtYmVyIjoiaW5pdCIsImFkZHJlc3MiOiJpbml0Iiwic3VybmFtZSI6ImluaXQiLCJuYW1lIjoiaW5pdCIsIl9pZCI6ImluaXQifSwic3RhdGVzIjp7Imlnbm9yZSI6e30sImRlZmF1bHQiOnt9LCJpbml0Ijp7Il9fdiI6dHJ1ZSwicGhvbmVOdW1iZXIiOnRydWUsImFkZHJlc3MiOnRydWUsInBhc3N3b3JkIjp0cnVlLCJlbWFpbCI6dHJ1ZSwic3VybmFtZSI6dHJ1ZSwibmFtZSI6dHJ1ZSwiX2lkIjp0cnVlfSwibW9kaWZ5Ijp7fSwicmVxdWlyZSI6e319LCJzdGF0ZU5hbWVzIjpbInJlcXVpcmUiLCJtb2RpZnkiLCJpbml0IiwiZGVmYXVsdCIsImlnbm9yZSJdfSwicGF0aHNUb1Njb3BlcyI6e30sImVtaXR0ZXIiOnsiZG9tYWluIjpudWxsLCJfZXZlbnRzIjp7fSwiX2V2ZW50c0NvdW50IjowLCJfbWF4TGlzdGVuZXJzIjowfX0sImlzTmV3IjpmYWxzZSwiX2RvYyI6eyJfX3YiOjAsInBob25lTnVtYmVyIjoiYWFhYSIsImFkZHJlc3MiOiJhYWFhIiwicGFzc3dvcmQiOiIkMmEkMTAkeDlGcTd1SlBIL3VHeUlEeUd3dnRwdUxlS0w2ZVFTTFpJRzRGVVBQQ2loOGg3RVNwZENPN08iLCJlbWFpbCI6ImFhYUBnbWFpbC5jb20iLCJzdXJuYW1lIjoiYWFhIiwibmFtZSI6ImFhYSIsIl9pZCI6IjU5NjBmYTc4NTAxNzA0MmI5YzU0ZjA1YyJ9LCIkaW5pdCI6dHJ1ZSwiaWF0IjoxNDk5NTI5NzA5LCJleHAiOjE1MDAxMzQ1MDl9.UEtThW_30lmPeIUCa8sIZtCfjtb4ek6qWxXyKpnWveI

我的注册和身份验证工作正常。但是配置文件不起作用。

我该如何处理这个问题？

Answer 1

当 angular 第一次尝试访问 students 时，它是未定义的，因为 getProfile 方法是异步的。所以你应该声明一个空的 Object 如下:

export class ProfileComponent implements OnInit {  
    students: Object = {};
    // rest of the code as it is