角通参数CanActivate

Question

我用的是角9。

正如您从下面的代码中看到的，app-routing.module.ts将url 'approval-edit/:tripId'定向到ApprovalEditGuard，后者将路由到LoginComponent，LoginComponent使用backUrl导航回原始的url 'approval-edit/:tripId'。

这一切都如期而至。

但是，我不知道如何将tripId参数传递到最终组件。

app-routing.module.ts

const routes: Routes = [
    { path: 'approval-edit/:tripId', component: ApprovalEditComponent, canActivate: [ApprovalEditGuard] }
];

approval-edit.guard.ts

export class ApprovalEditGuard implements CanActivate, CanLoad {

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

  canActivate() {
    return this.canLoad();
  }

  canLoad() {
    if (!this.authService.isLoggedIn()) {
      console.log(this.activateRoute.snapshot.params['tripId']);
      this.router.navigate(['/login'], { queryParams: { backUrl: '/approval-edit' } });
    }
    return this.authService.isLoggedIn();
  }
}

login.component.ts

export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router, private activatedRoute: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      username: [''],
      password: ['']
    });
  }

  get f() { return this.loginForm.controls; }
  get backUrl(): string | null {
    return this.activatedRoute.snapshot.queryParamMap.get('backUrl');
  }

  login() {
    this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    )
    .subscribe(success => {
      if (success) {
        this.router.navigate([this.backUrl || '/approval-list']);
      }
    });
  }
}

Answer 1

我也处理过同样的问题

警卫

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

  }

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot){
    
    return (this.authService.isLoggedIn())?true:this.router.parseUrl('login?backUrl='+state.url);
  }

登录

constructor(private authService: AuthService, private router:Router, private activatedRoute:ActivatedRoute) {

    }

login(){
this.authService.login(login,password).pipe(
    filter(success=>success),
    switchMap(()=>this.activatedRoute.queryParams),
    switchMap((_)=>{
        const {backUrl} = _;
        return from(this.router.navigate([backUrl || '/']));
    })
).subscribe()
}