如何在ABP Angular架构中将登录组件设为默认路由

一、修改Angular默认路由配置 #

直接把根路由的空路径重定向到ABP封装的登录页路由即可，修改你的路由配置如下：

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'account/login' // 根路径直接跳转到登录页
  },
  {
    path: 'account',
    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
  },
  {
    path: 'identity',
    loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
  },
  {
    path: 'tenant-management',
    loadChildren: () =>
      import('@abp/ng.tenant-management').then(m => m.TenantManagementModule.forLazy()),
  },
  {
    path: 'setting-management',
    loadChildren: () =>
      import('@abp/ng.setting-management').then(m => m.SettingManagementModule.forLazy()),
  },
];

二、解决登录跳转后端端口的问题 #

你看到的跳转到https://localhost:44325/Account/Login是因为ABP默认配置会跳转到后端IdentityServer的登录页面。要在前端显示登录组件，需要修改AppModule中的AuthModule配置，指定前端登录路由：

找到AppModule的imports数组里的AuthModule.forRoot()，添加loginUrl配置：

import { AuthModule } from '@abp/ng.auth';

@NgModule({
  imports: [
    // ...其他模块
    AuthModule.forRoot({
      loginUrl: '/account/login' // 指定前端登录页面路由，替代后端跳转
    }),
    // ...
  ]
})
export class AppModule {}

三、可选：未登录时自动拦截跳转登录页 #

如果希望用户访问任何需要授权的页面时，自动跳转到登录页，可以给需要保护的路由添加AuthGuard守卫，比如首页路由：

在HomeModule的路由配置中：

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

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard] // 添加守卫，未登录时自动跳转到登录页
  }
];

这样配置后，用户访问http://localhost:4200会直接跳转到前端登录页，点击登录按钮也不会跳转到后端端口，而是在前端完成登录流程。

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