Question

有人可以帮我修复我的 Angular 应用程序上的路由，它在成功登录后不会路由用户，它应该自动路由到的路由称为工作台，对不起，我的英语不是我的母语，谢谢！< /p>

这是我的代码：

登录ts文件

import { Component, OnInit, Input } from '@angular/core';
import { AuthService } from '@services/auth.service';
import { ObjPartyService } from '@services/obj-party.service';
import { ObjUserService } from '@services/obj-user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

  user = {
    username: 'TECHNICAL_USER',
    password: 'TECHNICAL_USER'
  };

  isLoading = false;
  message = null;

  constructor(private router: Router, private authService: AuthService, private objPartyService: ObjPartyService,
              private objUserService: ObjUserService) { }

  ngOnInit(): void {
  }

  onLogin(): void {
    this.isLoading = true;
    this.authService.logOut();
    this.authService.authenticate(this.user).subscribe(objUser => {

      this.objUserService.saveUser(objUser);

      this.objPartyService.getPrivatePerson().subscribe(userPerson => {
        this.objPartyService.savePrivatePersonToSessionStorage(userPerson);
        this.router.navigate(['workbench']);
      });

      this.isLoading = false;

    }, err => {
      this.message = 'Login failed: ' + err.error != null ?
        err.error.status + ' ' + err.error.error : 'Could not establish server connection.';

      this.isLoading = false;
    });
  }

  abortLogin(): void {
    this.isLoading = false;
  }
}

应用路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// Public Modules
import { HomeComponent } from './public/home/home.component';
import { ImprintComponent } from './public/imprint/imprint.component';
import { DataPrivacyComponent } from './public/data-privacy/data-privacy.component';
import { TechStackComponent } from './public/tech-stack/tech-stack.component';
// Auth Modules
import { AuthGuardService } from './services/auth-guard.service';
import { LoginComponent } from './public/login/login.component';
import { LogoutComponent } from './public/logout/logout.component';
import { RegistrationComponent } from './public/registration/registration.component';
import { UserProfileComponent } /*  */ from './protected/entities/static-data/user/user-profile/user-profile.component';
// // Protected Modules
import { WorkbenchComponent } from './protected/workbench/workbench.component';
// import { BusinessBaseComponent } from './protected/entities/party/business-base/business-base.component';
// import { MarketResearchComponent } from './protected/market-research/market-research.component';
import { ControlPanelComponent } from './protected/control-panel/control-panel.component';
import { LogComponent } from './protected/control-panel/log/log.component';
import { SettingsComponent } from './protected/control-panel/settings/settings.component';
import { OrderFormComponent } from '@protected/workbench/order-form/order-form.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuardService] },
  { path: 'imprint', component: ImprintComponent },
  { path: 'data-privacy', component: DataPrivacyComponent },
  { path: 'tech-stack', component: TechStackComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registration', component: RegistrationComponent },
  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuardService] },
  { path: 'workbench', component: WorkbenchComponent, canActivate: [AuthGuardService] },
  { path: 'user-profile', component: UserProfileComponent, canActivate: [AuthGuardService] },
  {
    path: 'control-panel', component: ControlPanelComponent, canActivate: [AuthGuardService], children: [
      { path: '', redirectTo: 'log', pathMatch: 'full' },
      { path: 'log', component: LogComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];


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

如果您需要更多帮助我，请告诉我！非常感谢

Answer 1

你可以试试这个路由。我希望它会起作用

登录ts文件

  this.router.navigateByUrl('/workbench');

应用路由

  const routes: Routes = [

  {
  path:'', component: MasterComponent, canActivate:[AuthGuard],
  children:[
  
  {path:'home',component: HomeComponent},
  { path: 'workbench', component: WorkbenchComponent},

  ]

  },   

  {path:'login', component: LoginComponent},
  {path:'', redirectTo:'/login',pathMatch:'full'},


  {path:'**',component: LoginComponent}

  ];

成功登录后，路由器不会重定向用户

1 个答案: