Angular Http Interceptor не может получить токен пользователя с localStorage для добавления в заголовок - PullRequest
Новая
       8

Angular Http Interceptor не может получить токен пользователя с localStorage для добавления в заголовок

0 голосов
/ 23 октября 2018

Это мой первый раз, когда я кодирую Перехватчик в моем угловом клиенте.Я добавил несколько статей в Google, чтобы добавить HttpInteceptor.Я позвонил в веб-интерфейс и получил токен.В журнале консоли я проверил, что токен получен, и добавил его в свое локальное хранилище.Вот мой угловой сервисный код: 

loginUser(user) : Observable<boolean> {
      var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
  return  this.http
        .post('http://localhost:55009/api/login', user )
        .map((data: any) => {
          this.token = data.token.token;
            localStorage.setItem('userToken', data.token.token);
            this.errorMessage = data.token.error;
console.log('token ===> ' + data.token.token);
console.log('isTokenValid ===> ' + this.isTokenValid());

console.log('errorMessage ===> ' + this.errorMessage);


                  return this.isTokenValid();
                })
    //  .map((response:any) => response.json())
     .catch(this.handleError);
              }

Когда я щелкнул по другому маршруту / меню, я прошел через код в файле interceptor.ts.Когда код вызывает localStorage.getItem и login.getToken, но оба возвращают пустые строки.Я проверил образец интерактивного учебного пособия и не увидел ничего другого в своем коде: 

export class AuthInterceptor implements HttpInterceptor {
 public userToken: string;

    constructor(private router: Router, public login: LoginService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

this.userToken =  this.login.getToken();

        if (req.headers.get('No-Auth') == "True")
            return next.handle(req.clone());

        if (localStorage.getItem('userToken') != null) {
            const clonedreq = req.clone({
                headers: req.headers.set("Authorization", "Bearer " + localStorage.getItem('userToken'))
            });
            return next.handle(clonedreq)
                .do(
                succ => { },
                err => {
                    if (err.status === 401)
                        this.router.navigateByUrl('/home');
                }
                );
        }
        else {
            this.router.navigateByUrl('/home');
        }
    }
}

Ответы [ 4 ]

0 голосов
/ 24 октября 2018

Это было странно.В угловом сервисе я смог получить токен и установить его с помощью LocalStorage.Однако компонент LocalStorage возвращал значение NULL.Я переместил LocalStorage.setItem из службы в компонент и теперь вижу значение в инструменте разработчика Chrome.

0 голосов
/ 24 октября 2018

Сначала убедитесь, что токен все еще находится в вашем локальном хранилище.Вы можете сделать это в Chrome следующим образом:

  • Перейдите в инструменты разработчика
  • Нажмите на вкладку «Приложение»
  • Нажмите «Локальное хранилище» налевая навигационная панель
  • Найдите название вашего сайта в разделе «Локальное хранилище» и щелкните по нему

. Он сообщит вам, если токен все еще присутствует в локальном хранилище.Если да, то я предлагаю вам установить точку останова в вашем коде перехватчика, чтобы подтвердить, что он работает правильно, когда загружен маршрут.

0 голосов
/ 24 октября 2018

Попробуйте, в методе loginUser: 

this.token = data;
localStorage.setItem('userToken', this.token.token);

вместо: 

this.token = data.token.token;
localStorage.setItem('userToken', data.token.token);
0 голосов
/ 23 октября 2018

Вы должны подписаться на http запрос. 

.map((response:any) => response.json())
.subscribe(res => console.log(res))
...