如何处理ASP.NET Core中HTML5客户端路由回退的问题

前言

大家应该都有所体会,我们在使用由Angular,React,Vue等应用程序框架构建的客户端应用程序时,您总是会处理HTML5客户端路由,它将完全在浏览器中处理到页面和组件的客户端路由。几乎完全在浏览器中...

HTML5客户端路由在客户端上工作的很好,但是当深入链接到一个站点或在浏览器中按刷新时,客户端路由有一个恶习,变成服务器HTTP请求。请求可能未配置服务器的路由。

在这篇文章中,我将讨论如何使ASP.NET Core(或间接ASP.NET应用程序)通过有效地将客户端应用程序重新连接到其路由来处理这些“假”请求。下面话不多说了,来随着小编来一起看看详细的介绍吧。

Html 5客户端路由?

如果您不知道HTML5客户端路由是什么,请快速回顾一下。

客户端框架实现他们自己的客户端路由机制,以便他们可以 - 就像服务器应用程序 - 在页面或组件之间进行导航。

Angular支持几种路由类型:

  • 哈希路线(http:// localhost:4200 /#!/ albums或http:// localhost:4200 /#/ albums)
  • HTML 5路线(http:// localhost:4200 / albums)

#!/ 哈希邦德路线

前者是一种较早的方法,它直接与HTTP语义一起工作,指定任何具有a的URL #在客户端被触发并跳转到页面内的“本地”URL。框架可以拦截导航并检查跟随的URL内容#以确定路线。散列爆炸#!用于区分应用程序URL和普通#锚链接。

散列爆炸路线的好处是,他们只是工作。没有服务器端出血的路线,如果您书签或刷新客户端页面,它只是如预期的那样工作,因为散列逻辑是作为浏览器中本地URL解析的一部分执行的。很简单,对吧?它只是工作。

但缺点是,如果您必须手动输入网址,则这些网址非常难看且不直观。对于散列爆炸路线来说,这并不是一个很好的论据,但是不管它们是否对HTML5路由不利。

哈希在Angular中的Bang路由

Angular使用默认的HTML5客户端路由,但它是一个简单的开关来启用Hashbang路由,而不是HTML5路由::

// in app.module.tsproviders : [ .. // make sure you use this for Hash Urls rather than HTML 5 routing { provide: LocationStrategy, useClass: HashLocationStrategy },]

只要您routerLink在HTML模板中使用链接网址,并router.navigate()在代码链接中使用,Angular交换机就会自动在两种模式之间进行切换。

  • 在HTML中使用<a routerLink="/albums" />链接
  • 在代码中使用: router.navigate(["/album",album.id])

HTML5路由

HTML5路由使用更复杂的方法 - 它使用HTML5的Pushstate API来控制客户端的路由并管理地址栏显示。

这种方法的优点是,使用HTML5 API相对容易操作,并且使用标准的无延伸路由约定,使用Web应用程序和API时,URL更加简洁,易于控制。

但是HTML5路由需要服务器的明确支持来正确理解哪些路由是服务器路由,哪些是客户路由。

没有服务器处理的HTML5路由问题

问题在于HTML5客户端路由与服务器路由无法区分。

http://localhost:4200/albums可以很容易地将客户端URL作为服务器端URL。在完全在客户端上导航时,HTML5路线工作正常 - 应用程序可以拦截导航并在激活特定路线时路由到相应的客户端页面。

如果您使用深层链接导航到客户端驱动的应用程序,然后您将该页面书签为书签,然后使用该URL导航回到该页面,或者刷新当前活动页面,则会弹出问题。在这两种情况下,当浏览器请求路由时,客户端应用程序不运行,因此浏览器向服务器请求路由URL。但是,默认情况下不设置处理说/albums路线,所以你会得到一个错误。

如果您在ASP.NET Core应用程序中没有对HTML5路由设置进行任何特殊处理,您将在应用程序中打开错误页面,或者从Kestrel中选择此默认显示:

图1 - 未处理的客户端路由产生服务器错误

修复服务器上的客户端路由

那么你如何解决这个问题呢?

客户端SPA应用程序通常有一个或几个启动应用程序的静态页面。对于一个典型的Angular应用程序,该页面是index.html启动应用程序并启动客户端路由。大多数框架都足够聪明,可以在启动时检查当前路由,并移至首次访问请求的路由。

如果客户端路由从书签,链接或完全刷新被触发到服务器,则需要提供index.html并保持原始URL不变。

然后,客户端应用程序将自行引导,并且内部路由启动,以希望将您甩回书签/刷新位置。

从服务器提供Index.html

为了这个工作,你需要确保服务器只提供服务器负责的内容。

有几种方法可以做到这一点:

  • 主机服务器URL重写
  • 处理ASP.NET Core应用程序中的客户端路由

主机Web服务器上的URL重写

如果您在主流Web服务器上运行ASP.NET Core(或ASP.NET)应用程序,最简单且最有效的解决方案是重写客户端URL并为index.html给定的URL 提供内容。

在IIS上,您可以使用IIS重写模块来执行此操作。我最近在一篇博文中更详细地介绍了这一点:

  • ASP.NET核心应用程序的IIS重写规则

但是这里是相关的IIS重写规则:

<rewrite> <rules> <!-- Make sure you have a <base href="/" rel="external nofollow" /> tag to fix the root path or all relative links will break on rewrite --><rule name="AngularJS-Html5-Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="api/" negate="true" /> </conditions> <action type="Rewrite" url="wwwroot/index.html" /> </rule> </rules></rewrite>

您可以从以下任何位置安装UrlRewrite模块:

  • Microsoft下载网站
  • choco install urlrewrite
  • Web平台安装程序

如果你在Linux上运行Docker和nginX或者Apache,那么类似的Rewrite选项就可以在那里使用。

让ASP.NET Core处理客户端路由

如前所述,我通常使用像IIS或nginX这样的前端Web服务器来处理重定向,但是通常在测试或内部应用程序时,只需要Kestrel直接为应用程序提供服务即可。如果您直接让Kestrel处理HTTP流量,那么您需要在ASP.NET Core代码中处理客户端路由。

捕获所有app.Run()处理程序

有很多方法可用,但是我发现了在Startup类的Configure()方法中使用一个非常简单的后备处理程序来处理客户端路由的最简单的方法:

// set up whatever routes you use with UseMvc()// you may not need to set up any routes here// if you only use attribute routes!app.UseMvc(routes =>{ routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");});//handle client side routesapp.Run( async (context) =>{ context.Response.ContentType = "text/html"; await context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));});

关键是app.Run()位于路由后的管道末端的中间件处理程序。如果服务器端路由不能找到匹配的路由,这个通用处理程序就会启动。

上面的代码是你可以做的最简单的事情,只是把内容发送index.html到客户端。如果您有多个静态页面和SPA筒仓,您可以在其中添加额外的逻辑来尝试确定需要加载哪个页面。

请注意,内容不会重定向到,而是作为内嵌流发送到现有的URL请求,以便用户请求的URL保持不变。这确保了当用户请求http://localhost:4200/albums你回到那个客户端页面而不是index.html。

捕获所有路由处理程序

另一种方法是在路由定义中使用最后定义的全部捕获的 MVC路由处理程序。这基本上拿起你的MVC路由配置无法处理的任何URL,然后路由到你指定的路线。

使用catch-all处理程序设置您的MVC路线,将此代码放在您的Startup类的Configure()方法中:

app.UseMvc(routes =>{ // default routes plus any other custom routesroutes.MapRoute(name: "default",template: "{controller=Home}/{action=Index}/{id?}"); // Catch all Route - catches anything not caught be other routesroutes.MapRoute(name: "catch-all",template: "{*url}",defaults: new {controller = "AlbumViewerApi", action = "RedirectIndex"});});

然后执行完全相同的事情中间件处理程序使用:index.html使用以下代码将内容流式传输到客户端:

// we need hosting environment for base pathpublic IHostingEnvironment HostingEnv { get; }public AlbumViewerApiController(IHostingEnvironment env){ HostingEnv = env;}[HttpGet]public IActionResult RedirectIndex(){ return new PhysicalFileResult( Path.Combine(HostingEnv.WebRootPath,"index.html"), new MediaTypeHeaderValue("text/html") );}

Catch-All Route不使用属性路由

确保您为回退路线指定的路线不具有分配给它的属性路线。当我昨天检查出来的时候,我无法得到一条全面的路线,直到我[Route("api/RedirectIndex")]从控制器的操作中移除 了这个全部工作。

SpaServices

SpaServices提供了另一个选项,routes.MapSpaFallbackRoute()尽管我自己也没有尝试过,但是如果您已经在ASP.NET Core应用程序中使用了Spa服务,那么这可能是一个简单的方法来实现这个功能,包括潜在的支持服务器预渲染。

概要

HTML5路由为客户端应用程序提供了干净的URL,但它的价格必须有服务器支持才能使其工作。使用主机Web服务器中的重写规则或直接在Kestrel的中间件管道或自定义路由处理程序中进行设置并不困难,但是您必须确保将此功能显式添加到您创建的每个ASP.NET应用程序中。

尽管旧的Hash Bang路线看起来不那么干净,但它们工作正常,不需要任何服务器端支持。对于需要支持古代浏览器的非公众应用程序或应用程序,在没有服务器支持的情况下,散列邦线路仍然是提供路由的可行方式。

最后,如果您正在使用完整的Web服务器,UrlRewriting是处理非ASP.NET内核后端直接处理的非API内容的最干净和最有效的方式。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • ASP.NET Core MVC 配置全局路由前缀

    ASP.NET Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应用背景 不知道大家在做 Web Api 应用程序的时候,有没有遇到过这种场景,就是所有的接口都是以 /api 开头的,也就是我们的api 接口请求地址是像这样的: http://www.example.com/api/order/333 或者是这样的需求 http://www.exa

  • [译]ASP.NET Core 2.0 路由引擎详解

    本文介绍了ASP.NET Core 2.0 路由引擎详解,分享给大家,具体如下: 问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvir

  • ASP.NET Core中使用默认MVC路由的配置

    ASP.NET Core里Route这块的改动不大,只是一些用法上有了调整,提供了一些更加简洁的语法. 而对于自定义路由的支持当然也是没有问题的,这个功能应该是从MVC1.0版本就已经有这个功能. 先看看ASP.NET Core里面实现默认MVC路由的配置方式 通常情况下,在使用MVC项目的时候,默认的路由就足够了,就是常见的通过Controller和Action获取具体的方法的方式. 从一个最基本的项目开始,执行以下步骤,就可以使得项目支持MVC路由 1.创建一个空白的ASP.NET Core

  • ASP.NET Core Razor 页面路由详解

    在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中,ASP.NET团队就是这样实现的. 关于 Razor 页面框架如何将 URL 与文件相匹配,有一些规则您必须了解,以及如何根据需要自定义规则改变输出的结果.如果您将 Razor 页面与 Web Form 框架进行比较,您还需要了解取代的 Ur l参数以及在URL中传递数据的机制. 规则一,Razor

  • 详解ASP.NET Core 2.0 路由引擎之网址生成(译)

    问题 如何在ASP.NET Core 2.0中由路由引擎来生成网址? 答案 新建一个空项目,修改Startup.cs文件,添加MVC服务和中间件: public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopmen

  • 如何处理ASP.NET Core中HTML5客户端路由回退的问题

    前言 大家应该都有所体会,我们在使用由Angular,React,Vue等应用程序框架构建的客户端应用程序时,您总是会处理HTML5客户端路由,它将完全在浏览器中处理到页面和组件的客户端路由.几乎完全在浏览器中... HTML5客户端路由在客户端上工作的很好,但是当深入链接到一个站点或在浏览器中按刷新时,客户端路由有一个恶习,变成服务器HTTP请求.请求可能未配置服务器的路由. 在这篇文章中,我将讨论如何使ASP.NET Core(或间接ASP.NET应用程序)通过有效地将客户端应用程序重新连接

  • ASP.NET Core中自定义路由约束的实现

    路由约束 ASP.NET Core中,通过定义路由模板,可以在Url上传递变量,同时可以针对变量提供默认值.可选和约束. 约束的使用方法是在属性路由上添加指定的约束名,用法如下: // 单个使用 [Route("users/{id:int}")] public User GetUserById(int id) { } // 组合使用 [Route("users/{id:int:min(1)}")] public User GetUserById(int id) {

  • ASP.NET Core中的Razor页面实现路由功能

    在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中,ASP.NET团队就是这样实现的. 关于 Razor 页面框架如何将 URL 与文件相匹配,有一些规则您必须了解,以及如何根据需要自定义规则改变输出的结果.如果您将 Razor 页面与 Web Form 框架进行比较,您还需要了解取代的 Ur l参数以及在URL中传递数据的机制. 规则一,Razor

  • ASP.NET Core中MVC模式实现路由二

    目录 1.URL生成 2.URL生成方式 2.1根据操作名称生成URL 2.2根据路由生成URL 2.3在HTML中生成URL 2.4在操作结果中生成URL 3.区域(Area) 4.实现IActionConstraint的路由约束 相关文章 ASP.NET Core中MVC模式实现路由一 ASP.NET Core中MVC模式实现路由二 1.URL生成 MVC应用程序可以使用路由的URL生成功能,生成指向操作(Action)的URL链接. IUrlHelper 接口用于生成URL,是MVC与路由

  • ASP.NET Core中MVC模式实现路由一

    目录 1.前言 2.设置路由中间件 3.传统路由 4.多个路由 4.1定义多个路由 4.2区分操作 5.属性路由 5.1 属性路由 5.2 使用 Http[Verb] 属性的属性路由 5.3合并路由 5.4指定属性路由的可选参数.默认值和约束 5.4自定义属性路由 相关文章 ASP.NET Core中MVC模式实现路由一 ASP.NET Core中MVC模式实现路由二 1.前言 ASP.NET Core MVC使用路由中间件来匹配传入请求的URL并将它们映射到操作(Action方法).路由在启动

  • Asp.Net Core中WebSocket绑定的方法详解

    说明 Websocket是html5后的产物,对于asp.net core中也得到了支持,Asp.Net Core中WebScoket的操作使用基本上和Asp.net中相同,不同的是,绑定监听. Asp.Net Core2.0默认已经支持WebSocket,不需要另外安装Nuget包. 通过对HttpContext中的WebSockets.AcceptWebSocketAsync方法,接受WebSocket请求:并返回WebScoket对象. 下面话不多说了,来一起看看详细的介绍吧. 一.示例1

  • ASP.NET Core中调整HTTP请求大小的几种方法详解

    一.前言 之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET Core应用的很多特性,比如路由.认证.会话.缓存等,也同时定制消息处理管道来实现的.我们甚至可以通过管道定制在ASP.NET Core平台上创建我们自己的Web框架,实际上MVC和SingalR这两个重要的Web框架也是采用这样的方式创建的. HTTP协议自身的特性决定了任何一个Web应用的工作方式都是监听.接收

  • 浅谈ASP.NET Core 中jwt授权认证的流程原理

    1,快速实现授权验证 什么是 JWT ?为什么要用 JWT ?JWT 的组成? 这些百度可以直接找到,这里不再赘述. 实际上,只需要知道 JWT 认证模式是使用一段 Token 作为认证依据的手段. 我们看一下 Postman 设置 Token 的位置. 那么,如何使用 C# 的 HttpClient 访问一个 JWT 认证的 WebAPI 呢? 下面来创建一个 ASP.NET Core 项目,尝试添加 JWT 验证功能. 1.1 添加 JWT 服务配置 在 Startup.cs 的 Confi

  • 如何在ASP.NET Core中使用Session的示例代码

    ASP.NET Core 是一个跨平台,开源的,轻量级,高性能 并且 高度模块化的web框架,Session 可以实现用户信息存储从而可以在同一个客户端的多次请求之间实现用户追踪,在 ASP.Net Core 中可以使用 Microsoft.AspNetCore.Session 中间件来启用 Session 机制. 中间件的价值在于可以在 request -> response 的过程中做一些定制化的操作,比如说:监视数据,切换路由,修改流转过程中的消息体,通常来说:中间件是以链式的方式灌入到

  • ASP.NET Core中Startup类、Configure()方法及中间件详解

    ASP.NET Core 程序启动过程如下 1, Startup 类 ASP.NET Core 应用使用Startup类,按照约定命名为Startup.Startup类: 可选择性地包括ConfigureServices方法以配置应用的服务. 必须包括Configure方法以创建应用的请求处理管道. 当应用启动时,运行时调用ConfigureServices和Configure . Startup 方法体如下 public class Startup { // 使用此方法向容器添加服务 publ

随机推荐