ABP 4.4.0 Angular UI替换Identity Server实现自有登录注册页集成咨询

前置条件 #

已在Angular项目中安装@volo/account npm包，Identity Server与Angular端为分离部署模式 #

步骤1：修改Angular端核心配置 #

1.1 调整OAuth配置 #

打开src/environments/environment.ts（生产环境对应修改environment.prod.ts），修改oAuth配置项：

export const environment = {
  production: false,
  oAuthConfig: {
    issuer: '你的Identity Server服务地址',
    clientId: '你的Angular客户端ID',
    clientSecret: '你的客户端密钥（如有）',
    scope: 'offline_access openid profile role email phone 你的其他服务scope',
    // 禁用默认跳转Identity Server登录页逻辑
    redirectToLoginIfUnauthorized: false,
    responseType: 'code',
  },
  // 其他原有配置保留
};

1.2 配置Account模块路由 #

在根路由配置文件app-routing.module.ts中添加account模块的路由规则：

const routes: Routes = [
  // 你的其他原有路由
  {
    path: 'account',
    loadChildren: () => import('@volo/account').then(m => m.AccountPublicModule.forLazy()),
  },
  // 兜底路由放最后
  { path: '**', redirectTo: '' }
];

1.3 替换全局未授权跳转逻辑 #

在项目根模块app.component.ts中添加401拦截跳转逻辑，覆盖默认跳转规则：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(
    private router: Router,
    private oauthService: OAuthService
  ) {
    // 监听未授权错误，跳转本地登录页
    this.oauthService.events
      .pipe(
        catchError((err: HttpErrorResponse) => {
          if (err.status === 401) {
            this.router.navigate(['/account/login']);
          }
          throw err;
        })
      )
      .subscribe();
  }
}

步骤2：调整Identity Server端客户端配置 #

在Identity Server服务的客户端配置中，找到你的Angular客户端对应配置项，做以下修改：

• 授权类型添加password（支持密码模式登录）
• CORS允许列表添加Angular域名https://localhost:4200（生产环境替换为实际域名）
• 重定向地址列表添加https://localhost:4200
• 登出回调地址列表添加https://localhost:4200/signout-callback-oidc

步骤3：功能验证 #

1. 重启Angular项目和Identity Server服务
2. 直接访问https://localhost:4200/account/login，确认登录页正常加载
3. 输入正确的用户名密码提交，确认可以正常登录并跳转回业务页
4. 未登录状态下访问需要授权的业务接口，确认自动跳转至本地/account/login页面

可选操作：自定义登录页UI #

如果需要修改默认登录页的样式或逻辑，可以通过ABP的组件替换机制，替换内置的LoginComponent即可完成自定义。 #

内容的提问来源于stack exchange，提问作者Imrankhan