Question

我是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＆amp; 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);
    };
  }
}

和loadUsers调用userservice来调用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中获得了这种方法Example

你能否建议我做错了什么？

Answer 1

是的，问题是const，不，你不是被迫这样做的。

当您在创建服务时（即应用程序的开头）声明标题时，您需要在执行调用之前创建标题。

试试这项服务：

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);
}

Answer 2

您可以在UserSrevice中创建一种获取httpOptions的方法：

@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')
            })
        }
    }
}

您也可以使用interceptors

为什么Angular5在浏览器F5时调用api？

2 个答案: