角形-9:如何使登录页面成为角-9中的高级页面？

Question

我已经从一个网站下载了一个开源的angular9模板。当我运行篡改板时，默认情况下它会显示dashboard/default。我希望它在默认情况下运行dashboard/default. auth/signin ，而不是

模板的作者已经定义的路由结构如下。app-routing.module.tc

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './theme/layout/admin/admin.component';
import {AuthComponent} from './theme/layout/auth/auth.component';

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        redirectTo: 'dashboard/default',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        loadChildren: () => import('./demo/dashboard/dashboard.module').then(module => module.DashboardModule)
      },
      {
        path: 'layout',
        loadChildren: () => import('./demo/pages/layout/layout.module').then(module => module.LayoutModule)
      },
      {
        path: 'basic',
        loadChildren: () => import('./demo/ui-elements/ui-basic/ui-basic.module').then(module => module.UiBasicModule)
      },
      {
        path: 'forms',
        loadChildren: () => import('./demo/pages/form-elements/form-elements.module').then(module => module.FormElementsModule)
      },
      {
        path: 'tbl-bootstrap',
        loadChildren: () => import('./demo/pages/tables/tbl-bootstrap/tbl-bootstrap.module').then(module => module.TblBootstrapModule)
      },
      {
        path: 'charts',
        loadChildren: () => import('./demo/pages/core-chart/core-chart.module').then(module => module.CoreChartModule)
      },
      {
        path: 'maps',
        loadChildren: () => import('./demo/pages/core-maps/core-maps.module').then(module => module.CoreMapsModule)
      },
      {
        path: 'sample-page',
        loadChildren: () => import('./demo/pages/sample-page/sample-page.module').then(module => module.SamplePageModule)
      }
    ]
  },
  {
    path: '',
    component: AuthComponent,
    children: [
      {
        path: 'auth',
        loadChildren: () => import('./demo/pages/authentication/authentication.module').then(module => module.AuthenticationModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您需要为此创建一个实现CanActivate的守护程序：

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.authService.isAuthenticated) {
      this.router.navigateByUrl('/auth');
      return false;
    }

    return true;
  }
}

然后在你想要保护的路线上使用这个守卫：

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        redirectTo: 'dashboard/default',
        pathMatch: 'full',
        canActivate: [AuthGuard] // <--- Your guard here
      }
...

查看更多关于角度保护的角度文档。

Answer 2

你试过用redirectTo: 'auth/signin'代替redirectTo: 'auth/signin'吗？

关于角度的各种基础知识都有大量的视频教程(如本例中的路由)。如果你要为每一个你不能正确处理的细节提出问题的话，你会有一段艰难的时光。

我要说的不是让你感到难过，但我也建议你花时间学习如何正确地使用谷歌。作为一名开发人员，不管技术如何，具有抽象和综合问题的能力对于解决问题至关重要。

祝你的任务好运！