页面刷新时不存在授权标头

Posted 2023-03-28

【中文标题】页面刷新时不存在授权标头

【英文标题】：Authorization header not present on page refresh

【发布时间】：2020-02-11 18:01:56

【问题描述】：

我有一个 C# 解决方案，包括：

IdentityServer 4 应用程序 .net core 2.2 Web API 反应 SPA

我使用身份服务器资源所有者密码流程通过 React 应用程序登录。这有效，我得到了一个访问令牌。

然后我在 web api 上调用一个方法，传递访问令牌：

[Authorize(AuthenticationSchemes = "Bearer")]
public async Task<VMFranchiseGeoJson> GetByAuthorizedUser()

   try
      
       var token = Context.Request.Headers["Authorization"];
       var user = (Context.User.Identity as ClaimsIdentity);
...

在登录后的第一次调用中，这可以正常工作，并且令牌包含不记名令牌，而 Context.User.Identity 包含声明。但是，如果我重新加载/刷新进行此调用的页面，它会在第一次甚至几次（似乎不是在设定的时间间隔之后，并且很快就会在 2-3 分钟内丢失标题）然后停止工作即授权标头不再存在。

但是……

它在对 API 的调用中传递，例如'授权：承载 eyJhbGciOiJSUzI1NiIsImtpZCI6IjAzMDg5OTk1YmJkNWVlY2...'

我在这里使用 CORS，因为它是本地开发，但我将其配置为：

services.AddCors(options =>
        
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        ); 

你必须以某种方式坚持它们吗？

尝试了多种解决方案、更改 CORS 策略、重写身份服务器部分、更改流程等

编辑身份验证配置@Alpha：

 services.AddMvcCore().AddRazorViewEngine().AddAuthorization();

        //services.AddAuthentication("Bearer")
        //    .AddIdentityServerAuthentication(options =>
        //    
        //        options.Authority = "http://localhost:5000";
        //        options.RequireHttpsMetadata = false;
        //        options.ApiName = "api";
        //    );

        services.AddAuthentication("Bearer")
            .AddJwtBearer("Bearer", options =>
            
                options.Authority = "http://localhost:5000";
                options.RequireHttpsMetadata = false;
                options.Audience = "api";
            );

【问题讨论】：

查看前端的开发者工具，尤其是网络选项卡，它应该显示所有请求，看看你是否能找到失败的请求。

感谢 Ferrybig，请求在前端没有失败。它被发送，包括后端不存在的授权标头。

你怎么知道它不存在于后端？如果是这种情况，GetByAuthorizedUser 将不会被击中。令牌似乎更有可能在几分钟后过期。

感谢 Ruard，我在那里有一个断点。注意到这超出了 [Authorize] 属性，这也很奇怪。

能否在 Startup.ConfigureServices 方法中显示您的身份验证配置？

【参考方案1】：

我昨天遇到了同样的问题，所以解决方案是将页眉设置逻辑放在一个主要组件中，例如“页眉”或“页脚”组件，该组件始终与每个页面一起呈现。

useEffect(() => 
axiosInstance.defaults.headers[
  "Authorization"
] = `Bearer $localStorage.getItem(`access_token`)`;

, []);

所以当我们的应用程序中呈现页眉或页脚组件时，页眉会自动设置其值“授权”，您的 API 调用将被成功调用。