Angular Auth Guards - 路由到上一页

Question

我正在使用 Angular 9.

我有以下内容：

const routes: Routes = [
    { path:'login', component:LoginComponent, canActivate: [AuthGuard] },
    { path: 'approval-list', component: ApprovalListComponent, canActivate: [ApprovalListGuard] },
    { path: 'edit-approval/:tripId', component: ApprovalListComponent }
];

如您所见，如果用户在 'approval-list' url 上输入，他们将被路由到 ApprovalListGuard。

认可-list.guards

@Injectable({
  providedIn: 'root'
})
export class ApprovalListGuard implements CanActivate, CanLoad {

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

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

  canLoad() {
    if (!this.authService.isLoggedIn()) {
        this.router.navigate(['/login']);
    }
    return this.authService.isLoggedIn();
  }
}

这又会将用户转到登录页面 ('/login') LoginComponent。

这按预期工作。

我的问题是，一旦用户路由到 LoginComponent，并成功登录，我希望他们继续 'approval-list' 路径到 ApprovalListComponent。

login.component.ts

export class LoginComponent implements OnInit {

  loginForm: FormGroup;

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

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

  get f() { return this.loginForm.controls; }

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

这行得通，即它路由到 approval-list。但是，我不希望它被硬编码。如何在守卫发送到 /login 之前设置到 url 的路由？例如，如果我想让它为 edit-approval.

工作

问题

如何在没有硬编码的情况下替换以下行 url:

this.router.navigate(['/approval-list']);

谢谢

Answer 1

当您重定向到登录页面时，您可以创建一个包含上一页的查询字符串 URL。登录成功后，您可以导航回查询字符串中传递的 URL。这是我在网站上看到的最常见的模式。

Answer 2

你可以这样做：

在 ApprovalListGuard 中

this.router.navigate(['/login'], { queryParams: { backUrl: '/approval-list' } });

然后，在登录组件中：

// Create an property to get the backUrl param on the url
get backUrl(): string | null {
  return this.activatedRoute.snapshot.queryParamMap.get('backUrl');
}

// After the success login
this.router.navigate([this.backUrl || '/defaultPath']);

必须注入activatedRoute对象（来自@angular/router）；

这就是我做项目的方式。

Angular Auth Guards - 路由到上一页

Angular Auth Gaurds - rout to previous page

angular-ui-router

angular