Angular 8 (四)Token 注入

功能流程:

1. client 提供用户名密码向server 端发起登录请求。

2. Server 端验证登录信息,并产生用户 token

3. client 端收到登录 token, 并保存到本地(cookies, storage,,,)

4. 向每个client 端请求头注入用户 token。

1.  client 提供用户名密码向server 端发起登录请求

自行定义一个访问api 的service. 细节见:https://www.cnblogs.com/crdanding/p/12096392.html

通过httpClient 访问 WebApi,如下:

2. Server 端验证登录信息,并产生用户 token

  •   Asp.net WebApi 项目创建时,自带 Owin 类库组,如果你创建的是一个空的 WebApi 项目,那么可以通过 Nuget package 手动添加 Owin 类库组。

 

 

  • 创建一个OwinAuthorize 类,如下:

  •  在 Startup.cs 中添加初始化

3. client 端收到登录 token, 并保存到本地

4.  向每个client 端请求头注入用户 token

 Angular 的 http 本身支持添加 http 中间件的行为,我们要做的是:1. 重写 http 中间件方法。 2. 在app.module.ts 中引用我们重写的 中间件

  • 创建一个JS 文件,这里命名为: auth.interceptor.ts, 代码如下:

作用就是向每个http 请求头部写入用户 token.

  • 在app.module.ts中加入引用,并指定执行

 

 

 

这样,每个从client 端发出的 http 请求都会自动添加上 token, 不需要到没有请求中处理。

原文地址:https://www.cnblogs.com/crdanding/p/12096932.html