ng-alain 与 .net core 搭配

写在前面

鉴于不少使用 ng-alain 都以 .net 为后端，如下我将以一个示例来描述 ng-alain 如何同 .net core 一块儿开发。示例以单个中后台项目为基准，对于多项目的应用大致相同，但总体目录结构固然不能以单个项目了，更多应该以多人开发为准。

全部源码，从 Github 中获取。

1、构建项目

一、构建

分为 ng-alain 和 .net core 两个部分，固然我推荐两者分开建立在一个根目录下，例如以一个 asdf 为项目名，建立一个 asdf 目录，而后分别使用如下方式构建一个完整的先后端：

md asdf
cd asdf

ng-alain

ng new asdf --style less
cd asdf
ng add ng-alain

此时，咱们将 asdf/asdf 目录重命名另外一个名称以便区分先后端：fe。

.net core

dotnet new webapi -o asdf
# 这里采用命令行，依然可使用 vs 建立项目

一样，咱们将 asdf/asdf 目录重命名另外一个名称以便区分先后端：be。

示例的命名方式你可使用你喜欢的风格。

最终咱们的 asdf 项目的目录结构以下：

asdf
  - be （后端 .net core）
  - fe （前端 Angular）

二、运行

先后端分开天然，分别开启两个命令行，而 vscode 着实很方便，分别在 be 和 fe 目录下运行：

be: dotnet watch run
fe: npm run hmr

默认状况下分开能够经过 https://localhost:5001/api/values 和 http://localhost:4200/ 访问先后端。

IIS

其实如果使用 vs 建立项目，能够更友好的将后端绑定至某个域名下，配合修改 host 可使开发环境更接近生产环境。固然啦，这一部分百度或博客园能够获得信息支持，这里再也不赘述。

2、编写后端

我在浅谈Angular网络请求 描述过网络请求与用户认证相关的，以此为扩展，咱们来尝试怎么实现这些细节。

.net core 也有中间件的概念，如同 Angular 拦截器。依然以一个网络请求流程式来描述这一过程，其大概以下：

• 使用拦截器，从 Header 获取用户 Token，并检查 Token 有效性
• 使用过滤器，检查请求体参数有效性
• 执行方法，并响应结果
• 使用拦截器处理统一异常处理

固然，这只是一个大概性，细节上可能须要处理得更多。

一、校验 Token

在 Startup.cs 增长一个简单经过 header 来获取 token 属性值，并进行校验有效性，最后再结果写入至 context.Items 里，这样整个请求只须要一次用户信息，后续直接使用 context.Items 来获取用户信息。

app.Use(async (context, next) => {
  if (!context.Request.Path.ToString().StartsWith("/api/passport")) {
    var _token = "";
    if (context.Request.Headers.TryGetValue("token", out var tokens) && tokens.Count > 0) {
      _token = tokens[0];
    }
    if (_token != "asdf") {
      context.Response.StatusCode = 401;
      return ;
    }
    
    var user = new User();
    user.Id = 1;
    user.Name = "cipchk";
    context.Items.Add("token", _token);
    context.Items.Add("user", user);
  }
  await next();
});

整段代码实现几个细节：

• 忽略全部 /api/passport 开头用户 Token 校验

• 从 headers 获取 token 值，并校验值

  • 若错误则直接返回 401 再也不执行后续动做
• 获取 User 信息并写入 context.Items 中，之后后续请求直接读取

此时，若再一次访问 https://localhost:5001/api/values 后端接收到的是一个 401 状态码。

二、统一异常处理

依然可使用中间件的写法，但为了区分不一样，这里采用过滤器的写法。

继承 ExceptionFilterAttribute 并重写 OnException 就能够简单的完成，ExceptionFilterAttribute 异常过滤器会在执行过程当中若遇到 throw 时会被触发。

public class ExceptionAttribute : ExceptionFilterAttribute {
  public override void OnException(ExceptionContext context) {
    var res = context.HttpContext.Response;

    res.StatusCode = 200;
    res.ContentType = "application/json; charset=utf-8";
    context.Result = new JsonResult(new {
      msg = context.Exception.Message,
      code = 503
    });
  }
}

最后，须要注册到整个应用里。

services.AddMvc(options => {
  options.Filters.Add(new ExceptionAttribute());
})

三、PassportController

新建一个 PassportController.cs 文件，内容以下：

[Route("api/[controller]")]
[ApiController]
public class PassportController : ControllerBase
{
  [HttpGet("{id}")]
  public JsonResult Get(int id)
  {
    if (id != 1) throw new Exception("无效用户");
    return new JsonResult(new { msg = "ok", data = "asdf" });
  }
}

前面咱们已经忽略对全部 /api/passport 开头的 URL 的用户 Token 校验，它是一个受权页理当如此。这里体现了两个细节：

• 若无效用户抛出一个错误

  • ExceptionAttribute 会捕获到这个错误，并从新指定变动响应体内容
  • 固然你依然可使用 return new JsonResult(new { msg = "无效用户" }); 这种方式
• 如有效用户返回用户 Token 值

这里都是手工建立统一响应体，你依然能够利用过滤器或中间件来统一处理响应体为统一风格，而对于方法内永远都只返回一个 data 对应值。上述单纯只是一个示例，须要自行更进一步封装。

四、跨域问题

本文描述是先后端分开开发，所以开发过程当中势必存在跨域请求的问题，一个简单的办法在 Startup.cs 里增长跨域代码：

#if DEBUG
app.UseCors(builder =>
{
  builder.AllowAnyMethod()
          .AllowAnyHeader()
          .AllowAnyOrigin();
});
#endif

条件编译能够很好的解决生产和开发环境的不一样，由于部署时咱们将不存在跨域问题，后续会描述。

五、小结

到此，咱们已经实现大部分 浅谈Angular网络请求 描述的功能，哪怕都是一个简化，但咱们能够访问：

• https://localhost:5001/api/values 返回 401
• https://localhost:5001/api/passport/1 返回用户 Token
• https://localhost:5001/api/passport/2 返回无效用户异常

3、编写前端

ng-alain 默认是以尽量接收生产环境项目的脚手架，诚如我在 浅谈Angular网络请求 描述的那样，不该该编写一个简单的 Hello World 请求来校验是否可用。

在开始以前，须要先了解 Angular 环境变动配置，它位于 fe/src/environments 目录中，每个文件表示一种环境，他们有者相同参数，但其值可能各不一样。

如果你跟着本文来作的话，那么相对应的是 environment.hmr.ts，咱们修改这里的 SERVER_URL 值为 https://localhost:5001/api/。这是表示全部请求都会在请求URL前自动加上该地址。

一、APP_INITIALIZER

Angular 启用前咱们能作的事只有这里，脚手架默认实现了 StartupService（位于：fe/src/app/core/startup/ 下），固然默认代码并不可用，咱们将其修改成：

load(): Promise<any> {
  // only works with promises
  // https://github.com/angular/angular/issues/15088
  return new Promise((resolve, reject) => {
    this.httpClient.get('values').subscribe(
      (res: any) => {
        this.injector.get(NzMessageService).success(JSON.stringify(res));
      },
      () => {},
      () => {
        resolve(null);
      },
    );
  });
}

这里请求是 api/values，但因为咱们给 Angular 环境变量统一配置 URL 前缀，所以只须要一个简单的 values 为请求 URL。（注：若请求URL地址不是指望结果，须要从新运行 npm run hmr）

此时，你访问前端时会自动跳转至 /passport/login 登陆页，这一切都是因为 @delon/auth 用户认证模块在管理的，咱们没有写任何一行关于前端校验的代码。

二、登陆页

登陆示例页的大部分代码是可用的，但本文并不关心这一些，咱们修改其中发送请求部分以下：

// mock http
this.loading = true;
this.http.get('passport/1').subscribe((res: any) => {
  this.loading = false;
  // 清空路由复用信息
  this.reuseTabService.clear();
  // 设置Token信息
  this.tokenService.set({
    token: res.data,
  });
  // 从新获取 StartupService 内容，若其包括 User 有关的信息的话
  this.startupSrv.load().then(() => this.router.navigate(['/']));
  // 不然直接跳转
  // this.router.navigate(['/']);
});

请求 passport/1 返回用户 Token，并把 Token 值写入 TokenService 中，最后跳转至仪表盘页。

登陆成功后，你还会接收到一个条 [ "value1", "value2" ] 的消息，这是来自 APP_INITIALIZER 产生的，至少代表咱们能正常访问到 values，由于此时你会发现该主体的 Header 已经包含了 token: asdf 字样。

三、小结

关于前端部分我简略的描述，这里还有更多细节，例如：响应体直接返回 data 的内容，更多细节自行挖掘。

4、部署

示例中的 .net core 部分是单纯的 Web API 项目，由此不存在任何页面之说。而如何让 .net core 项目直接以 Angular 项目来访问呢？这须要解决两个问题。

• 前端打包至 wwwroot 目录里
• .net core 默认以 index.html 默认访问页

一、打包前端

这里一个简单的办法是修改 angular.json 的输出路径（固然也能够直接命令行里直接指定）：

"outputPath": "../be/wwwroot",

最后，执行：

npm run bash

打包后的文件会直接存放至 be/wwwroot 目录下。

二、打包后端

默认状况下须要开启静态资源访问能力而且指定默认页为 index.html，在 Startup.cs 增长：

var options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(options);

app.UseStaticFiles();

此时，若你再访问 https://localhost:5001/ 会发现咱们启动的是一个 ng-alain 项目。

而对于后端的打包，也很是简单：

dotnet publish -o ../dist

最终，直接将根目录下的 dist 部署至 Web 服务器上。

5、总结

本文算是对 浅谈Angular网络请求 进一步实践，虽然一切都采用简化的代码来解释，但整体的流程是等同的。

基于 .net core 为后端是出于群里反应不少项目都是使用 .net，多是 .net framework 版本，但本质上是相同。示例我是以 vscode 编写，可能后端的格式会有些同 vs 不一样。

（完）