Angular 4：登录后跳转及跨页API请求401未授权问题

看起来你的问题核心是目标API仅支持不带token的GET请求，但登录后后续请求无法保持认证状态导致401。我们来一步步排查和修复：

问题分析 #

从你的代码来看，目前存在几个关键问题：

• 登录请求没有配置withCredentials，导致服务器返回的会话Cookie无法被浏览器保存，后续请求无法携带认证凭证
• StatusComponent中尝试用token去验证，但目标API不支持带token的请求，这个逻辑不符合API要求
• 后续API调用没有沿用登录时的认证上下文（比如会话Cookie）

解决方案 #

1. 修正登录请求，允许保存会话Cookie #

在auth.service.ts的login方法里，给RequestOptions添加withCredentials: true，这样浏览器会自动保存服务器返回的会话Cookie，后续请求会自动携带：

login(BASE_URL, user): Promise<any>{
  let headers = new Headers({ 
    'Content-Type': 'application/json', 
    'Authorization':"Basic "+btoa(user.username+":"+user.password), 
  })
  let options = new RequestOptions({ 
    headers: headers,
    withCredentials: true // 新增：允许携带凭证（会话Cookie）
  });
  // 注意：这里你定义了url变量但没用到，建议要么使用它要么删除
  // let url: string = `${this.BASE_URL}`;
  return this.http.get(BASE_URL, options).toPromise();
}

2. 后续API调用统一携带凭证 #

所有需要认证的API请求，都要加上withCredentials: true配置，这样浏览器会自动把之前保存的会话Cookie发送给服务器，无需手动携带token：
比如在StatusComponent中，替换原有的ensureAuthenticated逻辑，直接调用一个受保护的API端点来验证登录状态：

import { Http, Headers, RequestOptions } from '@angular/http'; // 确保导入Http

export class StatusComponent implements OnInit {
  isLoggedIn: boolean = false;
  constructor(private auth: AuthService, private http: Http) {} // 注入Http
  ngOnInit(): void {
    // 调用一个需要认证的API端点，带上withCredentials
    const options = new RequestOptions({ withCredentials: true });
    this.http.get('https://app.example/api/protected-endpoint', options)
      .toPromise()
      .then(() => {
        this.isLoggedIn = true;
        console.log("已登录");
      })
      .catch((err) => {
        console.log("未授权或会话过期", err);
        this.isLoggedIn = false;
        // 可选：跳回登录页
        // this.router.navigate(['/login']);
      });
  }
}

3. 确认服务器端配置 #

请确保你的API服务器满足以下条件：

• 登录成功后设置HttpOnly会话Cookie（用于后续请求的身份验证）
• CORS配置中设置Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能是*，必须指定你的前端应用域名（比如http://localhost:4200）

4. 清理无用代码 #

删除login.component.ts中保存token到localStorage的代码，因为目标API不支持token认证，这个token对你的场景没用：

// 删掉这一行
// localStorage.setItem('token', user.json().auth_token);

这样调整后，浏览器会在登录后自动保存会话Cookie，后续所有带withCredentials: true的GET请求都会携带这个Cookie，API就能识别你的登录状态，不会返回401了。

内容的提问来源于stack exchange，提问作者Hasan