前言

大家應(yīng)該都有所體會(huì)，我們?cè)谑褂糜葾ngular，React，Vue等應(yīng)用程序框架構(gòu)建的客戶端應(yīng)用程序時(shí)，您總是會(huì)處理HTML5客戶端路由，它將完全在瀏覽器中處理到頁(yè)面和組件的客戶端路由。幾乎完全在瀏覽器中...

HTML5客戶端路由在客戶端上工作的很好，但是當(dāng)深入鏈接到一個(gè)站點(diǎn)或在瀏覽器中按刷新時(shí)，客戶端路由有一個(gè)惡習(xí)，變成服務(wù)器HTTP請(qǐng)求。請(qǐng)求可能未配置服務(wù)器的路由。

在這篇文章中，我將討論如何使ASP.NET Core（或間接ASP.NET應(yīng)用程序）通過(guò)有效地將客戶端應(yīng)用程序重新連接到其路由來(lái)處理這些“假”請(qǐng)求。下面話不多說(shuō)了，來(lái)隨著小編來(lái)一起看看詳細(xì)的介紹吧。

Html 5客戶端路由？

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

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

Angular支持幾種路由類型：

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

#!/ 哈希邦德路線

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

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

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

哈希在Angular中的Bang路由

Angular使用默認(rèn)的HTML5客戶端路由，但它是一個(gè)簡(jiǎn)單的開(kāi)關(guān)來(lái)啟用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ī)就會(huì)自動(dòng)在兩種模式之間進(jìn)行切換。

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

HTML5路由

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

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

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

沒(méi)有服務(wù)器處理的HTML5路由問(wèn)題

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

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

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

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

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

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

那么你如何解決這個(gè)問(wèn)題呢？

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

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

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

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

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

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

• 主機(jī)服務(wù)器URL重寫(xiě)
• 處理ASP.NET Core應(yīng)用程序中的客戶端路由

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

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

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

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

但是這里是相關(guān)的IIS重寫(xiě)規(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平臺(tái)安裝程序

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

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

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

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

有很多方法可用，但是我發(fā)現(xiàn)了在Startup類的Configure()方法中使用一個(gè)非常簡(jiǎn)單的后備處理程序來(lái)處理客戶端路由的最簡(jiǎn)單的方法：

// 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ù)器端路由不能找到匹配的路由，這個(gè)通用處理程序就會(huì)啟動(dòng)。

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

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

捕獲所有路由處理程序

另一種方法是在路由定義中使用最后定義的全部捕獲的 MVC路由處理程序。這基本上拿起你的MVC路由配置無(wú)法處理的任何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)我昨天檢查出來(lái)的時(shí)候，我無(wú)法得到一條全面的路線，直到我[Route("api/RedirectIndex")]從控制器的操作中移除 了這個(gè)全部工作。

SpaServices

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

概要

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

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

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論