当我作为初学者尝试在我的网站上实现延迟加载时,遇到一个问题:登录后,登录页面将我重定向到空白屏幕。我该如何解决这个问题?
应用程序路由.moudle.ts
const routes: Routes = [
{
path: '',
component: WebsiteLayoutComponent,
children: [
{
path: '',
component: HomePageComponent // Home page component for website
},
{
path: 'subcategory/:categoryId',
component: SubcategoryPageComponent
},
{
path: 'products',
component: ProductPageComponent // Route for displaying search results
},
{
path: 'product/:categoryId',
component: ProductPageComponent
},
{
path: 'product/:categoryId/:subcategoryId', // Route for products with subcategories
component: ProductPageComponent
},
// Add other website routes here
]
},
{ path: 'login', component: LoginComponent },
{ path: 'swiper', component: SwiperComponent }, // Define a login route
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
canActivate: [AuthGuard]
},
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
管理路由模块.ts:
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminLayoutComponent,
canActivate: [AuthGuard],
children: [
{ path: '', redirectTo: 'brand-list', pathMatch: 'full' },
{ path: 'brand-list', component: BrandListComponent },
{ path: 'category-list/:brandId', component: CategoryListComponent },
{ path: 'add-category', component: AddCategoryComponent },
{ path: 'edit-category/:id', component: EditCategoryDialogComponent },
{ path: 'edit-subcategory/:id', component: EditSubcategoryDialogComponent },
{ path: 'subcategory-list', component: SubcategoryListComponent },
{ path: 'bycategory/:id', component: SubcategoryListComponent },
{ path: 'products/:subcategoryId', component: ProductListComponent },
{ path: 'product/:id', component: ProductPageComponent },
{ path: '**', redirectTo: 'brand-list' }
]
}
];
@NgModule({
imports: [RouterModule.forChild(adminRoutes)],
exports: [RouterModule]
})
export class AdminRoutingModule {}
登录.component.ts:
export class LoginComponent {
username: string = '';
password: string = '';
errorMessage: string = '';
constructor(private authService: AuthService, private router: Router) {}
async login(): Promise<void> {
if (!this.username || !this.password) {
this.showErrorMessage("Username and password are required.");
return;
}
try {
const loggedIn = await this.authService.login(this.username, this.password);
if (loggedIn) {
this.router.navigate(['/admin']);
} else {
this.showErrorMessage("Incorrect username or password.");
}
} catch (error) {
console.error("Error during login:", error);
this.showErrorMessage("An error occurred during login.");
}
}
showErrorMessage(message: string): void {
this.errorMessage = message;
}
}
成功登录后,我希望登录页面将我路由到/admin
现在您的应用程序中没有
/admin
路线,但由于嵌套而有 /admin/admin
。你应该修复admin-routing-module.ts
。
而不是
const adminRoutes: Routes = [
{
path: 'admin',
...
}
];
应该只是
const adminRoutes: Routes = [
{
path: '',
...
}
];