Question

我想根据用户的角色来重定向用户。 F.e.当用户输入为“教师”时，他将在页面“ 1”上重定向；如果他以“学生”身份输入，则会在页面“ 2”上重定向。当用户仅输入主网址“ app.com”（F.e。）时，它也必须工作

const routes: Routes = [
  {
    path: '',
    component: TesLandingPageContainer,
    canActivate: [AutheticatedGuard],
    canActivateChild: [UserRoleGuard],
    children: [
      {
        path: '',
        redirectTo: '/users/profile',
        pathMatch: 'full',
      },
  ...
  },          
  {
    path: '**',
    redirectTo: ''
  }
];

我有这个警卫

@Injectable()
export class AutheticatedGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) { }

  canActivate(): Observable<boolean> {
    return this.store.pipe(
      select(getIsAuthenticated),
      filter(isAuth => isAuth != null),
      tap(isAuth => {
        if (!isAuth) {
          this.router.navigate(['/login']);
        }
      }),
      take(1)
    );
  }
}

如果我这样写，它会循环

canActivate(): Observable<boolean> {
    return this.store.pipe(
      select(getUserRoleAndAuth),
      filter(user => user.isAuth != null),
      tap(user => {
        switch (user.role) {
          case 'ADMIN': {
            this.router.navigate(['user/requests']);
            break;
          }
          case 'TEACHER': {
            this.router.navigate(['groups']);
            break;
          }
          case 'STUDENT': {
            this.router.navigate(['student']);
            break;
          }
          default: {
            this.router.navigate(['/login']);
          }
        }
      }),
      map(user => user.isAuth),
      take(1)
    );
    ```

Answer 1

使用this.router.navigate(['student']);代替使用return this.router.parseUrl('/student');

parseUrl将创建UrlTree，这有助于从CanActivate导航应用程序。

您需要通过CanActivate接口（布尔值或UrlTree）返回东西。

根据您的逻辑，返回学生或老师的URL。

基于角色的重定向

1 个答案: