Angular应用已登录成功但调用接口仍返回Error 401未授权问题

问题核心原因 #

登录成功后服务端下发的身份凭证（Cookie/Token）没有在后续请求中被正确携带，导致服务端无法识别用户身份。

分场景解决方案 #

场景1：服务端使用Cookie/Session做身份校验 #

• 全局开启$http跨域携带凭证配置，在模块配置段添加以下代码：

angular.module('yourApp', [])
.config(['$httpProvider', function($httpProvider) {
  // 开启跨域请求携带Cookie
  $httpProvider.defaults.withCredentials = true;
}])

• 也可在单次请求中单独添加withCredentials: true参数
• 需同步确认服务端配置：响应头Access-Control-Allow-Credentials设为true，且Access-Control-Allow-Origin不能配置为通配符*，必须指定为前端实际域名

场景2：服务端使用Token做身份校验 #

• 登录成功后从响应头/响应体中提取服务端返回的Token，存储到本地存储（localStorage/sessionStorage）
• 后续请求在请求头中携带该Token，示例修改后的代码如下：

$http({
  method: 'POST',
  url : 'localhost/login',
  // 注意：POST请求参数建议放在data字段，params会拼接到URL上
  data:{"login_name":"admin","password":"admin"},
  withCredentials: true
}).then(function success(response) {
  $scope.show= response.data;
  // 示例：从响应头获取Authorization字段的Token，根据服务端实际返回调整
  const userToken = response.headers('Authorization');
  localStorage.setItem('loginToken', userToken);
  $http({ 
    method: 'GET',
    url: 'localhost/checkUser',
    withCredentials: true,
    // 请求头携带Token
    headers: {
      'Authorization': localStorage.getItem('loginToken')
    }
  }).then(function success(response) {
    $scope.show2=response.data;
  }, function error(response) {
    console.log('校验请求失败', response);
  });
});

通用排查技巧 #

打开浏览器开发者工具的「网络」面板，查看以下内容快速定位问题：

• 登录接口的响应头是否存在Set-Cookie字段，或者响应体/响应头是否返回了合法的Token
• 后续checkUser请求的请求头是否携带了登录后下发的Cookie，或者是否添加了正确的Token请求头
• 确认登录请求的参数传递方式是否符合服务端要求：POST请求的业务参数一般放在data字段，params仅用于URL查询参数

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