Angular: 为Angular SPA程序添加Authorization支持

alvachien

已于 2022-11-05 16:29:22 修改

阅读量849

点赞数 1

分类专栏： Web Programming 文章标签：前端 angular web app typescript authorization

于 2022-11-05 16:16:42 首次发布

本文链接：https://blog.youkuaiyun.com/alvachien/article/details/127705081

版权

本篇详细描述怎么为Angular SPA程序添加Authorization的全记录。相对应的，本篇中使用了Identity Server （.Net Core开源项目）作为Identity Provider。

AccessToken和Refresh Token

权限控制无所不在，基于OAuth, OpenID这些解决方案在今时今日的开发中几乎是必不可少的。

这里只强调下Access Token和Refresh Token的关联与区别：

Access Token的生命周期通常是比较短暂。譬如Identity Server设置一般设置为3600秒，即一个小时就会过期；
Refresh Token。显然每个小时就要终端客户重输密码来登录不是个很好的设计，所以Refresh Token提出来用以简化登录次数。通常Refresh Token默认比较长。Identity Server中一般设置为30天。

那么Access Token怎么跟Refresh Token协同工作呢？一般来说，整个

Client进行登录，Server会同时发放Access Token和Refresh token；通常Client会保存住Refresh Token;
当Client察觉到Access Token过期时，它会Refresh token要求刷新Access token；
Server会根据Refresh Token的有效性并下发最新的Access Token；
重复上述两步（这两步均无客户干预），直至Refresh Token也失效；
Refresh Token也失效时，重新登录。

由于Refresh Token这个特效，在开发库中，其也被称为Offline Access。

安装依赖

如果是Angular CLI创建的应用程序，添加：

ng add angular-auth-oidc-client

当然也可以使用NPM/YARN来安装。

当开始执行时，首先要求确认：

ℹ Using package manager: npm
✔ Found compatible package version: angular-auth-oidc-client@14.1.5.
✔ Package information loaded.

The package angular-auth-oidc-client@14.1.5 will be installed and executed.
Would you like to proceed? (Y/n)

当选择Y之后，会进行安装，并要求输入一些必要信息。下列中的(XXXX)是项目特定信息，需要按照项目的实际填写。

✔ Package successfully installed.
? What flow to use? OIDC Code Flow PKCE using refresh tokens
? Please enter your authority URL or Azure tenant id or Http config URL （XXXX）
    🔎 Running checks...
    ✅️ Project found, working with 'myproject'
    ✅️ Added "angular-auth-oidc-client" 14.1.5
    🔍 Installing packages...
    ✅️ Installed
    ✅️ 'src/app/auth/auth-config.module.ts' will be created
    ✅️ 'AuthConfigModule' is imported in 'src/app/app.module.ts'
    ✅️ All imports done, please add the 'RouterModule' as well if you don't have it imported yet.
    ✅️ No silent-renew entry in assets array needed
    ✅️ No 'silent-renew.html' needed
CREATE src/app/auth/auth-config.module.ts (703 bytes)
UPDATE package.json (2281 bytes)
UPDATE src/app/app.module.ts (3951 bytes)

这时，项目中多了一个src\auth的文件夹，其中只有一个Module。

@NgModule({
   
    imports: [AuthModule.forRoot({
   
        config: {
   
              authority: 'XXXX.com',
              redirectUrl: window.location.origin,
              postLogoutRedirectUri: window.location.origin,
              clientId: 'please-enter-clientId',
              scope: 'please-enter-scopes', // 'openid profile offline_access ' + your scopes
              responseType: 'code',
              silentRenew: true,
              useRefreshToken: true,
              renewTimeBeforeTokenExpiresInSeconds: 30,
          }
      })],
    exports: [AuthModule],
})
export class AuthConfigModule {
   }