2017-07-15 251 views
0

我试图在配置文件页面上获取用户信息,但它显示GET http://localhost:3000/users/profile 401(未授权)。 请在下面的链接找到我得到的图像。 enter image description here 这里的代码,我在三个文件中使用。未经授权的401错误GET http:// localhost:3000/users/profile 401(未授权)

这是auth.service.ts

import { Injectable } from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthService { 

    authToken: any; 
    user: any; 

    constructor(private http:Http) { } 

    registerUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:3000/users/register', user,{headers: headers}) 
    .map(res => res.json()); 
    } 

    authenticateUser(user){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.post('http://localhost:3000/users/authenticate', user,{headers: headers}) 
    .map(res => res.json()); 
    } 

    getProfile(){ 
    let headers = new Headers(); 
    this.loadToken(); 
    headers.append('Autherization', this.authToken); 
    headers.append('Content-Type', 'application/json'); 
    return this.http.get('http://localhost:3000/users/profile',{headers: headers}) 
    .map(res => res.json()); 
    } 

    storeUserData(token, user){ 
    localStorage.setItem('id_token', token); 
    localStorage.setItem('user', JSON.stringify(user)); 
    this.authToken = token; 
    this.user = user; 
    } 

    loadToken(){ 
    const token = localStorage.getItem('id_token'); 
    this.authToken = token; 
    } 

    logout(){ 
    this.authToken = null; 
    this.user = null; 
    localStorage.clear(); 
    } 
} 

这是profile.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../../services/auth.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-profile', 
    templateUrl: './profile.component.html', 
    styleUrls: ['./profile.component.css'] 
}) 
export class ProfileComponent implements OnInit { 
    user: Object; 

    constructor(
     private authService : AuthService, 
     private router: Router 
    ) { } 

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

} 

这是profile.component.html

<div *ngIf="user"> 
    <h2 class="page-header" >{{user.name}}</h2> 
    <ul class="list-group"> 
     <li class="list-group-item">Username: {{user.username}}</li> 
     <li class="list-group-item">Email: {{user.email}}</li> 
    </ul> 
</div> 

回答

0

我得到了输出,授权中有小的拼写错误。现在它正在工作。