注销功能刷新页面但它仍然登录

我正在学习 Udemy 的课程，讲师方面正在使用 Angular 2，我正在尝试使用最新版本构建应用程序。我遇到的主要问题是登出功能被访问，但因为我必须刷新页面以再次显示登录表单，出于某种原因，刷新后，我看到了登录表单，但它又回到了我已登录。

后端的注销方法：

@RequestMapping(value="/loggedOut", method=RequestMethod.POST)
public ResponseEntity logout(){
    SecurityContextHolder.clearContext();
    return new ResponseEntity("Logout Successfully!", HttpStatus.OK);
}

从我的登录服务注销功能：

logOut() {
const url = 'http://localhost:8181/loggedOut';
const basicHeader = 'Basic ' + localStorage.getItem('credentials');
const headers = new HttpHeaders({
  'x-auth-token' : JSON.stringify(localStorage.getItem('xAuthToken')),
  'Authorization' : basicHeader
});
return this.http.post(url, '', { headers, responseType: 'text'});

负责登出的按钮：

logout() {
  this.loginService.logOut().subscribe(
    res => {
      location.reload();
      console.log("Logged out")
    },
    error => {
      console.log(error)
    }
  );

从技术上讲，它是这样的：登录 -> 登录表单 -> 登录

登录：

登录表格：

如果我删除 reload 方法，我可以看到 logout 方法被访问，我从后端得到 200。

刷新前的网络选项卡：

刷新前的服务器响应：