怎么處理ASP.NET Core中HTML5客戶端路由回退的問題

這篇文章將為大家詳細(xì)講解有關(guān)怎么處理ASP.NET Core中HTML5客戶端路由回退的問題，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Html 5客戶端路由？

如果您不知道HTML5客戶端路由是什么，請快速回顧一下。

客戶端框架實(shí)現(xiàn)他們自己的客戶端路由機(jī)制，以便他們可以 - 就像服務(wù)器應(yīng)用程序 - 在頁面或組件之間進(jìn)行導(dǎo)航。

Angular支持幾種路由類型：

• 哈希路線（http：// localhost：4200 /＃！/ albums或http：// localhost：4200 /＃/ albums）

• HTML 5路線（http：// localhost：4200 / albums）

#!/ 哈希邦德路線

前者是一種較早的方法，它直接與HTTP語義一起工作，指定任何具有a的URL #在客戶端被觸發(fā)并跳轉(zhuǎn)到頁面內(nèi)的“本地”URL。框架可以攔截導(dǎo)航并檢查跟隨的URL內(nèi)容#以確定路線。散列爆炸#!用于區(qū)分應(yīng)用程序URL和普通#錨鏈接。

散列爆炸路線的好處是，他們只是工作。沒有服務(wù)器端出血的路線，如果您書簽或刷新客戶端頁面，它只是如預(yù)期的那樣工作，因?yàn)樯⒘羞壿嬍亲鳛闉g覽器中本地URL解析的一部分執(zhí)行的。很簡單，對吧？它只是工作。

但缺點(diǎn)是，如果您必須手動輸入網(wǎng)址，則這些網(wǎng)址非常難看且不直觀。對于散列爆炸路線來說，這并不是一個很好的論據(jù)，但是不管它們是否對HTML5路由不利。

哈希在Angular中的Bang路由

Angular使用默認(rèn)的HTML5客戶端路由，但它是一個簡單的開關(guān)來啟用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模板中使用鏈接網(wǎng)址，并router.navigate()在代碼鏈接中使用，Angular交換機(jī)就會自動在兩種模式之間進(jìn)行切換。

• 在HTML中使用<a routerLink="/albums" />鏈接

• 在代碼中使用： router.navigate(["/album",album.id])

HTML5路由

HTML5路由使用更復(fù)雜的方法 - 它使用HTML5的Pushstate API來控制客戶端的路由并管理地址欄顯示。

這種方法的優(yōu)點(diǎn)是，使用HTML5 API相對容易操作，并且使用標(biāo)準(zhǔn)的無延伸路由約定，使用Web應(yīng)用程序和API時，URL更加簡潔，易于控制。

但是HTML5路由需要服務(wù)器的明確支持來正確理解哪些路由是服務(wù)器路由，哪些是客戶路由。

沒有服務(wù)器處理的HTML5路由問題

問題在于HTML5客戶端路由與服務(wù)器路由無法區(qū)分。

http://localhost:4200/albums可以很容易地將客戶端URL作為服務(wù)器端URL。在完全在客戶端上導(dǎo)航時，HTML5路線工作正常 - 應(yīng)用程序可以攔截導(dǎo)航并在激活特定路線時路由到相應(yīng)的客戶端頁面。

如果您使用深層鏈接導(dǎo)航到客戶端驅(qū)動的應(yīng)用程序，然后您將該頁面書簽為書簽，然后使用該URL導(dǎo)航回到該頁面，或者刷新當(dāng)前活動頁面，則會彈出問題。在這兩種情況下，當(dāng)瀏覽器請求路由時，客戶端應(yīng)用程序不運(yùn)行，因此瀏覽器向服務(wù)器請求路由URL。但是，默認(rèn)情況下不設(shè)置處理說/albums路線，所以你會得到一個錯誤。

如果您在ASP.NET Core應(yīng)用程序中沒有對HTML5路由設(shè)置進(jìn)行任何特殊處理，您將在應(yīng)用程序中打開錯誤頁面，或者從Kestrel中選擇此默認(rèn)顯示：

圖1 - 未處理的客戶端路由產(chǎn)生服務(wù)器錯誤

修復(fù)服務(wù)器上的客戶端路由

那么你如何解決這個問題呢？

客戶端SPA應(yīng)用程序通常有一個或幾個啟動應(yīng)用程序的靜態(tài)頁面。對于一個典型的Angular應(yīng)用程序，該頁面是index.html啟動應(yīng)用程序并啟動客戶端路由。大多數(shù)框架都足夠聰明，可以在啟動時檢查當(dāng)前路由，并移至首次訪問請求的路由。

如果客戶端路由從書簽，鏈接或完全刷新被觸發(fā)到服務(wù)器，則需要提供index.html并保持原始URL不變。

然后，客戶端應(yīng)用程序?qū)⒆孕幸龑?dǎo)，并且內(nèi)部路由啟動，以希望將您甩回書簽/刷新位置。

從服務(wù)器提供Index.html

為了這個工作，你需要確保服務(wù)器只提供服務(wù)器負(fù)責(zé)的內(nèi)容。

有幾種方法可以做到這一點(diǎn)：

• 主機(jī)服務(wù)器URL重寫

• 處理ASP.NET Core應(yīng)用程序中的客戶端路由

主機(jī)Web服務(wù)器上的URL重寫

如果您在主流Web服務(wù)器上運(yùn)行ASP.NET Core（或ASP.NET）應(yīng)用程序，最簡單且最有效的解決方案是重寫客戶端URL并為index.html給定的URL 提供內(nèi)容。

在IIS上，您可以使用IIS重寫模塊來執(zhí)行此操作。我最近在一篇博文中更詳細(xì)地介紹了這一點(diǎn)：

• ASP.NET核心應(yīng)用程序的IIS重寫規(guī)則

但是這里是相關(guān)的IIS重寫規(guī)則：

<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下載網(wǎng)站

• choco install urlrewrite

• Web平臺安裝程序

如果你在Linux上運(yùn)行Docker和nginX或者Apache，那么類似的Rewrite選項(xiàng)就可以在那里使用。

讓ASP.NET Core處理客戶端路由

如前所述，我通常使用像IIS或nginX這樣的前端Web服務(wù)器來處理重定向，但是通常在測試或內(nèi)部應(yīng)用程序時，只需要Kestrel直接為應(yīng)用程序提供服務(wù)即可。如果您直接讓Kestrel處理HTTP流量，那么您需要在ASP.NET Core代碼中處理客戶端路由。

捕獲所有app.Run()處理程序

有很多方法可用，但是我發(fā)現(xiàn)了在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"));});

關(guān)鍵是app.Run()位于路由后的管道末端的中間件處理程序。如果服務(wù)器端路由不能找到匹配的路由，這個通用處理程序就會啟動。

上面的代碼是你可以做的最簡單的事情，只是把內(nèi)容發(fā)送index.html到客戶端。如果您有多個靜態(tài)頁面和SPA筒倉，您可以在其中添加額外的邏輯來嘗試確定需要加載哪個頁面。

請注意，內(nèi)容不會重定向到，而是作為內(nèi)嵌流發(fā)送到現(xiàn)有的URL請求，以便用戶請求的URL保持不變。這確保了當(dāng)用戶請求http://localhost:4200/albums你回到那個客戶端頁面而不是index.html。

捕獲所有路由處理程序

另一種方法是在路由定義中使用最后定義的全部捕獲的 MVC路由處理程序。這基本上拿起你的MVC路由配置無法處理的任何URL，然后路由到你指定的路線。

使用catch-all處理程序設(shè)置您的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"});});

然后執(zhí)行完全相同的事情中間件處理程序使用：index.html使用以下代碼將內(nèi)容流式傳輸?shù)娇蛻舳耍?/p>

// 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不使用屬性路由

確保您為回退路線指定的路線不具有分配給它的屬性路線。當(dāng)我昨天檢查出來的時候，我無法得到一條全面的路線，直到我[Route("api/RedirectIndex")]從控制器的操作中移除 了這個全部工作。

SpaServices

SpaServices提供了另一個選項(xiàng)，routes.MapSpaFallbackRoute()盡管我自己也沒有嘗試過，但是如果您已經(jīng)在ASP.NET Core應(yīng)用程序中使用了Spa服務(wù)，那么這可能是一個簡單的方法來實(shí)現(xiàn)這個功能，包括潛在的支持服務(wù)器預(yù)渲染。

概要

HTML5路由為客戶端應(yīng)用程序提供了干凈的URL，但它的價格必須有服務(wù)器支持才能使其工作。使用主機(jī)Web服務(wù)器中的重寫規(guī)則或直接在Kestrel的中間件管道或自定義路由處理程序中進(jìn)行設(shè)置并不困難，但是您必須確保將此功能顯式添加到您創(chuàng)建的每個ASP.NET應(yīng)用程序中。

盡管舊的Hash Bang路線看起來不那么干凈，但它們工作正常，不需要任何服務(wù)器端支持。對于需要支持古代瀏覽器的非公眾應(yīng)用程序或應(yīng)用程序，在沒有服務(wù)器支持的情況下，散列邦線路仍然是提供路由的可行方式。

最后，如果您正在使用完整的Web服務(wù)器，UrlRewriting是處理非ASP.NET內(nèi)核后端直接處理的非API內(nèi)容的最干凈和最有效的方式。

關(guān)于“怎么處理ASP.NET Core中HTML5客戶端路由回退的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。