Question

我试图在个人资料页面上获取用户信息，但它显示GET http://localhost:3000/users/profile 401（未经授权）。请在下面的链接中找到我得到的图像。 enter image description here 这里是我在三个文件中使用的代码。

这是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>

Answer 1

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

Answer 2

在auth.service.ts中的getProfile函数中进行以下更改：

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

只需将授权转换为授权希望对您有帮助

Answer 3

尝试

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

未经授权的401错误GET http：// localhost：3000 / users / profile 401（未经授权）

3 个答案: