Question

我使用Angular5作为Front和Symfony作为后端。

我有一个这样的登录功能，工作正常：

login(username: string, password: string): Observable<UserModel>
  return this.globalHttp.post('login', {username,password}).subscribe(
      data => {
        const token = token.data;
        this.setToken(token);
        this.router.navigateByUrl("/profiles-list");
        return Observable.of(data.user);
  });
}

因此该函数通过在localstorage中设置令牌来登录。

但是当路由器导航到/ profiles-list时，令牌仍为空。

型材-list.component.ts

ngOnInit(){
  this.profileService.getProfiles();
}

profile.service.ts

getProfiles(): Observable<ProfileModel[]>
{
  return this.globalHttp.get('profiles',{});
}

全局http.service

token: string = localStorage.getItem('token') || null;

private _headers = {headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.token).set('Content-Type' : 'application/json')};

get( url: string, data?: any): Observable<any>
{
  return this.http.get(this.API_URL + url + this._headers)
}

我必须在登录后重新加载页面才能使其正常工作。我错过了什么？

由于

Answer 1

您刚刚在服务中声明了token。因此，当服务初始化时，令牌没有任何价值，它将永远不会“自行”更新。只需在get中获取令牌并设置标题：

get(url: string, data?: any): Observable<any> {
  let token = localStorage.getItem('token') || null;
  let headers = {headers: new HttpHeaders()
                  .set('Authorization', 'Bearer ' + token)
                  .set('Content-Type' : 'application/json')};

  return this.http.get(this.API_URL + url + headers)
}

您还可以在单独的方法中移动获取令牌和设置标头，然后在get - 方法（以及所有其他可能的方法）中调用它。

Answer 2

我终于设法解决了这个问题：

全局http.service

export class GlobalHttpService
{
   token;
   headers;

   constructor (private http: HttpClient)
   {
     this.token = localStorage.getItem('token') || null;
     this.headers = {headers: new HttpHeaders()
                      .set('Authorization', 'Bearer ' + this.token)
                      .set('Content-Type', 'application/json)};
   }

   get( url:string, data?: any): Observable<any>
   {
     return this.http.get(this.API_URL + url + this.headers)
   }

Angular，登录，令牌，路由器

2 个答案: