Açısal 2 uygulamamdaki JWT'yi kullanarak ve onu localStorage'da saklayarak. Ancak, bu öğe olmadığında nasıl işleyebilirim?

Question

Bir JWT döndüren arka uç auth API'yi çağıran bir token-service.ts oluşturdum. Benim getToken() burada gösterildiği gibi localStorage bu JWT'yi saklamak:

getToken() { 
    this.http.post('myAuthEndpoint', { credentials }) 
    .subscribe((res) => { 
    const token = res.headers.get('Authorization') 
    localStorage.setItem('id_token', token); 
    }); 
} 

benim app.component.ts, benim ngOnInit yönteminde getToken() arıyorum.

Ancak, burada ben benim app.component.html yanı da bu:

<navigation-top></navigation-top> 
<router-outlet></router-outlet> 

Ve bir sorunu bu noktada ise - benim top-navigation.service.ts den getNavigationTop() bağlantıları ve malzeme doldurmak için benim Benim NavigationTop bileşeninde, seni arıyorum. getNavigationTop()'da yaptığım API çağrısı, getToken() numaralı telefona aldığım auth jetonunu gerektiriyor, ancak null init.

Bu davayı nasıl ele alabilirim?

getNavigationTop(): Observable<any> { 
    let headers = new Headers({ 'Authorization': localStorage.getItem('token') }); 
    let options = new RequestOptions({ headers: headers }); 
    let data = this.http 
    .get('my url', options) 
    .map((res: Response) => { 
     return res.json().navTop; 
    }) 
    .catch(this.handleError); 
    return data; 
} 

Teşekkür

Answer 1

Taşı olanlar bir hizmete ve gibi ana modül içine ekleyin: İlk yük sonra sayfayı yeniden zaman sonra localStorage gelen değer elde edebilirsiniz çünkü şu anda o işleri sağlayıcısı.

Bunu aşağıda yapın. Daha sonra hizmeti herhangi bir bileşene enjekte edebilir ve isteğiniz üzerine çağırabilirsiniz.

@Injectable() 
export class TokenService { 
    getToken() { 
     this.http.post('myAuthEndpoint', { credentials }) 
     .subscribe((res) => { 
     const token = res.headers.get('Authorization') 
     localStorage.setItem('id_token', token); 
     this.getNavigationTop(token); 
     }); 
    } 


    getNavigationTop(token?): Observable<any> { 
     let headers = new Headers({ 'Authorization': token ? token: localStorage.getItem('token') }); 

ve sonra bileşeninde

:

import {TokenService} from '..../'; 

... 



    @Component 
export class NavigationTop { 

    constructor(private tokenService: TokenService) { 
     } 

    ngOnInit() { 

    this.tokenService.getToken(); 
    } 

daha sonra getNavigationTop tekrar çalıştırırsanız Şimdi, ilk belirteç argüman (opsiyonel) kontrol edecektir fakat herhangi bir şey yoksa, localStorage yerine deneyin.