Почему Angular5 вызывает API, когда F5 из браузера? - PullRequest
Новая
       9

Почему Angular5 вызывает API, когда F5 из браузера?

0 голосов
/ 30 мая 2018

Я новичок в angularjs (использую v5) и пытаюсь сделать маршрутизацию.Ну, маршрутизация работает нормально, но она загружает данные только когда мы нажимаем f5.

У меня есть страница входа.при нажатии кнопки входа в систему вызывается Api и возвращает токен для аутентичного пользователя.как показано ниже:

Компонент входа в систему 

login()
  {
    this.authService.login(this.model).subscribe(m=>{
    this.alertify.success('Logged in successfully');
    localStorage.setItem('token', this.userToken);
    }, error => {
      this.alertify.error(error);
    }, ()=>{
       this.router.navigate(['/welcome'])
    });
  }

В этом методе, после того как токен успешно возвращен API, пользователь отправляется на страницу приветствия, и он отображает страницу приветствия, но без каких-либо данных об этом.пользователь.То есть он показывает пустую страницу. Это происходит потому, что «api» не вызывается всеми заголовками, которые включают в себя заголовок Authorization & berarer.

Но при выполнении f5 из браузера он передает заголовки в api и при успешном завершении возвращает данные.

и ниже - это приветственный компонент. 

 export class WelcomeComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers()
  {
    alert("Loading users");
    this.userService.getUsers().subscribe(users => this.users = users)
    , error => {
      this.alertify.error(error);
    };
  }
}

и вызов loadUsersuserservice для вызова API.Вот пользовательский сервис: 

const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    })
  };

  @Injectable()
export class UserService {
baseUrl = environment.apiUrl;

constructor(private httpClient: HttpClient) { }

 getUsers (): Observable<User[]> {
    alert(httpOptions.headers);
      return this.httpClient.get<User[]>(this.baseUrl + 'users', httpOptions).catch(this.handleError);
    }

}

По моему мнению, переменная const может быть причиной проблемы, но я получил эту методологию от angularjs live Пример

Не могли бы выподскажите пожалуйста где я делаю не так?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вы можете создать метод для получения httpOptions в UserSrevice как: 

@Injectable()
export class UserService {
    baseUrl = environment.apiUrl;

    constructor(private httpClient: HttpClient) { }

    getUsers (): Observable<User[]> {
        alert(httpOptions.headers);
        return this.httpClient.get<User[]>(this.baseUrl + 'users', this.getHttpOptions()).catch(this.handleError);
    }

    getHttpOptions() {
        return {
            headers: new HttpHeaders({
                'Content-Type':  'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            })
        }
    }
}

Вы также можете использовать перехватчики

0 голосов
/ 30 мая 2018

Да, проблема в том, что нет, вы не обязаны это делать.

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

Попробуйте это к вашим услугам: 

getUsers (): Observable<User[]> {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    });
  };
  return this.httpClient.get<User[]>(this.baseUrl + 'users', httpOptions).catch(this.handleError);
}
...