抠丁客 抠丁客
项目
编辑 (2025/12/24)

Angular UI 账户模块

Angular UI账户模块自v4.3版本起可用。它包含若干页面（登录、注册、我的账户等）。

若将账户模块添加至您的项目：

  • 顶部栏当前用户下拉菜单中的"我的账户"链接将重定向用户至账户模块中的页面。
  • 您可将认证流程切换为资源所有者密码流。

账户模块实施步骤

通过以下命令安装@abp/ng.account NPM包：

npm install @abp/ng.account

请确保安装的是v4.3或更高版本。

打开app.config.ts文件，将provideAccountConfig()添加至提供者数组，如下所示：

// app.config.ts

import { provideAccountConfig } from "@abp/ng.account/config";
// ...

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideAccountConfig(),
    // ...
  ],
};

打开app.routes.ts文件，将account路由添加至APP_ROUTES数组，如下所示：

// app.routes.ts
export const APP_ROUTES: Routes = [
  //...
  {
    path: 'account',
    loadChildren: () => import('@abp/ng.account').then(c => c.createRoutes()),
  },
  //...
];

商业版模板的账户公共模块实施

专业版启动模板附带@volo/abp.ng.account包。您应将包版本更新至v4.3或更高版本。可通过以下命令更新：

npm install @volo/abp.ng.account

请确保安装的是v4.3或更高版本。

打开app.config.ts文件，将provideAccountPublicConfig()添加至提供者数组，如下所示：

若使用Lepton X主题，请确保已添加Account Layout Provider。若遗漏此步骤，将收到错误提示：未找到账户布局。请检查配置。若使用LeptonX，请确保已在应用配置中添加"provideAccountLayout()"。否则，可跳过添加provideAccountLayout()步骤。

// app.config.ts

import { provideAccountPublicConfig } from "@volo/abp.ng.account/public/config";
// 若正在使用或计划使用Lepton X，应添加provideAccountLayout
// import { provideAccountLayout } from '@volosoft/abp.ng.theme.lepton-x/account'

//...

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideAccountPublicConfig(),
    provideAccountLayout() // 仅适用于Lepton X
    // ...
  ],
};

打开app.routes.ts文件，将account路由添加至APP_ROUTES数组，如下所示：

// app.routes.ts

export const APP_ROUTES: Routes = [
  //...
  {
    path: 'account',
    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.createRoutes()),
  },
  //...
];

我的账户页面

在v4.3之前，顶部栏当前用户下拉菜单中的"我的账户"链接会将用户重定向至MVC的配置文件管理页面。自v4.3起，若已将账户模块添加至项目，相同链接将跳转至Angular UI账户模块中的页面。

个人信息页面确认提示

当用户在"我的账户"的个人设置选项卡中修改自身数据时，这些数据无法更新Application-Configuration的CurrentUser键值。用户信息存储于声明中。将此信息应用于Application-Configuration的CurrentUser的唯一方式是用户需重新登录。待刷新令牌功能实现后，此问题将得到修复。因此我们添加了确认提示。

若需禁用此警告，应将isPersonalSettingsChangedConfirmationActive设为false：

// app.routes.ts
export const APP_ROUTES: Routes = [
  //...
  {
    path: 'account',
    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.create({ isPersonalSettingsChangedConfirmationActive:false })),
  },
  //...
];

安全日志页面[商业版]

在v4.3之前，顶部栏当前用户下拉菜单中的"安全日志"链接会将用户重定向至MVC的安全日志页面。自v4.3起，若已将账户模块添加至项目，相同链接将跳转至Angular UI账户公共模块中的页面。

资源所有者密码流

OAuth在Angular应用模板中默认预配置为授权码流。若已将账户模块添加至项目，可通过修改_environment.ts_文件中的OAuth配置切换至资源所有者密码流，如下所示：

import { Config } from '@abp/ng.core';

export const environment = {
  // 为简洁起见省略其他选项

  oAuthConfig: {
    issuer: 'https://localhost:44305', // AuthServer地址
    clientId: 'MyProjectName_App',
    dummyClientSecret: '1q2w3e*',
    scope: 'offline_access MyProjectName',
  },

  // 为简洁起见省略其他选项
} as Config.Environment;

详情请参阅Angular UI中的授权文档。

在本文档中