如何使用JWT令牌将获取的响应数据存储在angular 5中

时间:2018-06-20 07:18:00

标签: angular angular5 typescript2.0 angular4-httpclient

 getEmployeeList():Observable<Employee[]>{
  return this.http.get<Employee[]>('moi/employee/getEmp', AuthService.getHttpOptions());
}

我的AuthService.getHttpOptions()方法是:

 public static getHttpOptions(): any {''
    var httpOptions = {
        headers: new HttpHeaders({
            'Content-Type':  'application/json',
            'observe': "body",
            'Authorization': "Bearer " + localStorage.getItem("authtoken")
          })
    };
    return httpOptions;
}

得到错误:

  

类型'Observable>'不能分配给类型'Observable'。

     

类型'HttpEvent'不能分配给类型'Employee []'。

     

类型'HttpSentEvent'不能分配给类型'Employee []'。

     

类型'HttpSentEvent'中缺少属性'includes'。

请让我知道。感谢进阶

1 个答案:

答案 0 :(得分:0)

import { Observable } from 'rxjs/Observable';
import {Http,Headers,RequestOptions }  from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired} from 'angular2-jwt';
export Class serviceName{
  authToken;
  headers;
  // After login we have already store jwt token on the localstorage
  constructor(private _http:Http,private _router:Router) { 
    this.loadToken();
    this.headers = new Headers({'Content-Type': 'application/json', 'Authorization': 
     'Bareer '+this.authToken});
   }
   loadToken(){
     this.authToken = localStorage.getItem('token');
   }
  createAuthenticateHeaders(){
    this.loadToken();
    this.options = new RequestOptions({
      'headers':new Headers({
        'Content-Type': 'application/json',
        'authorization':this.authToken
      })
    });
  }
   getEmployeeList(userInfo){
    this.createAuthenticateHeaders();
    return this._http.get(this.domain+'/products', {headers:this.headers})
     .map(response => response.json());
   }
 }

您可以像这样绑定令牌。 步骤

  • 登录并生成身份验证令牌
  • 将令牌存储在sessionstorage中。enter code here
  • 然后在服务的构造函数中加载该令牌。
  • 然后创建标题
  • 调用任何在标头中传递令牌的服务方法。