Angular 2的HTML5 pushState在ASP.NET Core上的解决思路

Angular 2的HTML5 pushState在ASP.NET Core上的解决思路

正如Angular 2在Routing & Navigation中所提及的那样，Angular 2是推荐使用HTML5 pushState的URL style的。

localhost:3002/crisis-center/

而不是Angular 1中所使用的“hash URL sytle“

localhost:3002/src/#/crisis-center/

这种URL Style带来的问题是，直接输入的URL会直接访问对应Server资源，换言之，要支持这种URL Style，Server端必须增加额外的Routing才行。本文简单介绍一下在ASP.NET Core上的三种解决思路。

• 解决思路一，使用NotFound的MiddleWare
  MSDN 有一篇Article介绍了如何实现自己的MiddleWare来实现自定义404 Page，当然，该Article主要Focus在如何智能纠错。我们这里只关注如何使用类似的方法来达到所需要的效果。

MiddleWare的实现代码：

    public class NotFoundMiddleware
    {
        private readonly RequestDelegate _next;

        public NotFoundMiddleware(RequestDelegate next)
        {
            _next = next;
        }

        public async Task Invoke(HttpContext httpContext)
        {
            string path = httpContext.Request.Path;

            await _next(httpContext);

            if (httpContext.Response.StatusCode == 404 &&
                (path.StartsWith("/allowpath1")
                || path.StartsWith("/allowpath2"))
            {
                string indexPath = "wwwroot/index.html";
                // Redirect is another way
                //httpContext.Response.Redirect(indexPath, permanent: true);
                httpContext.Response.Clear();
                httpContext.Response.StatusCode = 200; // HttpStatusCode.OK;
                httpContext.Response.ContentType = "text/html";

                await httpContext.Response.WriteAsync(File.ReadAllText(indexPath));
            }
        }
    }

    // Extension method used to add the middleware to the HTTP request pipeline.
    public static class NotFoundMiddlewareExtensions
    {
        public static IApplicationBuilder UseNotFoundMiddleware(this IApplicationBuilder builder)
        {
            return builder.UseMiddleware<NotFoundMiddleware>();
        }
    }

然后再Startup Class中使用该MiddleWare：

app.UseNotFoundMiddleware();

• 解决思路二，使用Routing
  使用Routing是另外一种解决问题的思路，即把所有默认的request发送给默认的Controller。这里，要求启用标准的MVC。
  实现一个HomeController类：

    public class HomeController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            return View();
        }
    }

创建Index.cshtml，必须放置在Views\Home或者Views\Shared文件夹中，文件内容即index.html内容。
然后再Startup 类中指定default routing：

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            //services.AddMvcCore()
            //    .AddJsonFormatters();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseDefaultFiles();
            app.UseStaticFiles();
            app.UseMvc(routes =>
            {
                routes.MapRoute("AngularDeepLinkingRoute", "{*url}",
                    new { controller = "Home", action = "Index" });
            });
        }

值得注意的是，必须在project.json中把Views文件夹加入publishOptions的include部分：

  "publishOptions": {
    "include": [
      "wwwroot",
      "Views",
      "web.config",
    ],
    "exclude": [
      "node_modules",
      "bower_components"
    ]
  },

• 解决思路三，直接修改Request的Path
  这个思路更加简单暴力，也更为高效，因为之前的思路要么是访问失败（404的StatusCode）后的Redirect，要么是路由失败后的Default实现，这个思路直接在Request入口就改写了Request的Path

public void Configure(IApplicationBuilder app)
{
    app.UseIISPlatformHandler();

         var angularRoutes = new[] {
                "/allowpath1",
                "/allowpath2",
        };

    app.Use(async (context, next) =>
    {
        if (context.Request.Path.HasValue &&
            null !=
            angularRoutes.FirstOrDefault(
            (ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
        {
            context.Request.Path = new PathString("/");
        }

        await next();
    });

    app.UseDefaultFiles();
    app.UseStaticFiles();
}

是为之记。
Alva Chien
2016.8.24