12、单页应用访问安全微服务及相关技术实践

单页应用访问安全微服务及相关技术实践

1. 单页应用获取访问令牌与加载书籍流程

当单页应用（SPA）收到访问令牌后，页面上的“登录”按钮会被“加载书籍”按钮替代。点击“加载书籍”按钮时，浏览器会向资源服务器发起请求以获取书籍列表，并将其显示在网页上。与之前示例不同的是，此时浏览器会在 Authorization: Bearer 请求头中携带访问令牌发送给资源服务器。资源服务器会与授权服务器通信来验证该访问令牌，只有验证成功后才会返回书籍列表。

下面是相关流程的 mermaid 流程图：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(Web 浏览器):::process -->|GET 请求，携带授权码| B(Web 服务器):::process
    B -->|POST 请求，授权码授权| C(授权服务器):::process
    C -->|访问令牌| B
    B -->|访问令牌| A
    A -->|GET 请求，携带访问令牌| D(资源服务器):::process
    D -->|与授权服务器验证| C
    C -->|验证响应| D
    D -->|书籍列表| A

2. 应用代码分析

2.1 Angular 单页应用代码

使用 angular-oauth2-oidc 库通过