如何在Angular 10中创建自定义重定向器？

我在angular项目中使用路由进行站点导航，但是，我想根据各种条件从根/主机URL重定向用户，我不确定angular路由器是否可以做到这一点

因此，我尝试使用

HomeComponent

来处理这些重定向

下面是一个流程图，解释了我要实现的目标：

• 如果用户已登录，则应将其带到各自的门户-用户类型存储在用户的令牌中
• 用户应该只能访问分配给他们的门户
• 如果用户已登录，则应无法访问登录页面

在我的主应用程序路由模块中，我有：

import { HomeComponent } from './../home/home.component';
import { LoginComponent } from './../login/login.component';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'staff',
    loadChildren: () => import('../staff-portal/staff-portal.module').then(m => m.StaffPortalModule)
  },
  {
    path: '**',
    component: HomeComponent
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(
      appRoutes,
      {
        preloadingStrategy: PreloadAllModules
      }
      )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {

 }

我的主页（重定向器）组件：

import { AuthService } from './../_services/auth.service';
import { NavigationStart, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template: ''
})
export class HomeComponent {

  constructor(private authService: AuthService, private router: Router) { 
    if (this.authService.loggedIn)
        {
          let parsedToken = this.authService.getParsedToken();

          if (parsedToken.type === '0')
          {
            this.router.navigate(['/staff/home']);
            return;
          }
          else if (parsedToken.type === '1')
          {
            this.router.navigate(['/student/home']);
            return;
          }
          else if (parsedToken.type === '2')
          {
            this.router.navigate(['/parent/home']);
            return;
          }
        }

    this.router.navigate(['/login']);
    return;
   }

}

我现在遇到的问题是，当用户未登录并导航到根目录时，angular会尝试显示

HomeComponent

的模板（一个空字符串）

---

我不完全确定使用组件是否是实现这种行为的正确方法，这正是我迄今为止设法想到的方法，但请随意建议一种替代方法。

我建议根据身份验证状态研究解决路由逻辑的方法

因此，您可以将重定向逻辑保存在guard类中，而不是在组件中编写重定向逻辑

路由配置示例：

{
  path: '/your-path',
  component: YourComponent,
  canActivate: [YourGuard],
}

export class YourGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}

保护代码示例：

{
  path: '/your-path',
  component: YourComponent,
  canActivate: [YourGuard],
}

export class YourGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}

---

将AuthGuard与canLoad一起使用：

//routes
{
    path: 'staff',
    loadChildren: () => import('../staff-portal/staff-portal.module').then(m => m.StaffPortalModule),
canLoad: [AuthGuard]
  },

//auth-guard.service.ts
import { Router, CanLoad, Route } from '@angular/router';
import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanLoad {
    constructor(
    private authService: AuthService,
    private router: Router
    ) {}

    canLoad(route: Route): boolean {
        if (this.authService.isLoggedIn()) {
            return true;
        }
        this.router.navigate(['', 'login']);
        return false;
    }
}

//auth.service.ts
import { LocalStorageService } from './local-storage.service';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {

    constructor(
        private localStorageService: LocalStorageService,
        private router: Router
    ) {}

    login(data) {
        this.localStorageService.set('token', data.token);
        this.router.navigate(['', 'staff']);
    }

    logout() {
        window.localStorage.clear();
        this.router.navigate(['']);
    }

    isLoggedIn(): boolean {
        if (this.localStorageService.get('token')) {
           return true;
        }
        return false;
    }
}