标签: angular-guards

从角文档上canActivate,看来你只能用canActivate后卫,让程序的途径,如果该canActivate函数返回最后true.

有没有办法说,"只有在canActivate课程评估为false" 时才进入这条路线？"

例如,为了不允许登录用户访问登录页面,我尝试了这个但是它不起作用:

export const routes: Route[] = [
    { path: 'log-in', component: LoginComponent, canActivate: [ !UserLoggedInGuard ] },

我在控制台中遇到此错误:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!
Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!

在我的Angular 4应用程序中,我有一些带有表单的组件,如下所示:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({...});
  }

他们使用Guard服务来防止未提交的更改丢失,因此如果用户在请求确认之前尝试更改路由:

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
  form: FormGroup;
}

export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent) {
    if (component.form.dirty) {
      return confirm(
        'The form has not been submitted yet, do you really want to leave page?'
      );
    }

    return true;
  }
}

这是使用一个简单的confirm(...)对话框,它工作得很好.

但是我想用更花哨的模态对话框替换这个简单的对话框,例如使用ngx-bootstrap Modal.

如何使用模态来实现相同的结果？

我在导航到提供状态的过程中遇到了Angular路由器的问题.

我试过使用自定义后卫canLoad()和canActivate()功能返回布尔值true没有任何运气.

Angular 文档声明如下:

NavigationCancel:取消导航时触发的事件.这是由于Route Guard在导航期间返回false.

由于我没有从路由器跟踪中获得更多调试信息(没有给出任何理由),我被迫在这里检查是否存在修复,或者这是否是现有错误.我也很欣赏有关在Angular 6中调试路由器的其他方法的任何信息.

控制台输出

我在这里创建了一个小项目.该项目需要访问提供者,我正在使用angular-oauth2-oidc存储库中提供的提供的OpenID Connect提供程序.密码/用户名是max/geheim.

如何重现错误

1. 克隆仓库并在localhost:4200上提供网站服务
2. 转到localhost:4200/oversikt/index
3. 以max/geheim身份登录为用户名/密码
4. 阅读控制台

更新 我怀疑它与导航到children: []路线有关.

我有一个像这样导航的组件

this.router.navigate(['results'], { state });

一旦到了那里，我就获取了构造函数中的数据

constructor(private router: Router) { 
  const { state } = this.router.getCurrentNavigation().extras;
}

我想放置一个警卫来检查此数据是否存在，否则导航到其他地方

@Injectable()
export default class RouteHasDataGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return !!state.root.data;
    } 
}

但这不起作用。你能帮我吗？

我有嵌套组件：

• 应用组件
  • 仅包含路由器插座
• 页面包装组件
  • 仅包含主菜单和另一个路由器插座
  • 需要在显示之前从 API 加载主菜单
• 内容组件
  • 包含实际的页面内容
  • 需要在显示之前从 API 加载页面内容

我使用 Router 的Resolve解析主菜单和页面内容：

const routes: Routes = [
  {
    path:        '',
    component:   PageWrapperComponent,
    resolve: {
        mainMenu: MainMenuResoler,
    },
    children:    [
      {
        path: '',
        component: ContentComponent,
        resolve: {
           content: ContentResolver,
        }
      }
    ]
];

我想在 MainMenuResoler 完成后立即显示主菜单（PageWrapperComponent）。ContentResolver 完成后，然后就是内容（ContentComponent）。但如何呢？

我预料到路由器会出现这种行为。相反，Angular 会等待两个解析器完成，然后同时显示 PageWrapperComponent 和 ContentComponent。

我有这个AuthGuard:

export class AuthGuard implements CanActivate {

  constructor (private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('token')) {
      return true;
    }

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

我在我的提供AppModule:

@NgModule({
  declarations: [/*...*/],
  imports: [NotificationRoutingModule],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我试图在我的路由模块中使用这个后卫,如下所示:

const routes = [
  {
    path: 'notification',
    component: NotificationRootComponent
    children: [
      {path: '', redirectTo: 'list', pathMatch: 'full'},
      {path: 'list', component: NotificationListComponent, canActivate: [AuthGuard]},
      {path: ':id', …

我正在编写一个防护程序，可以防止用户在未经身份验证时访问目标网址。我正在编写一个functional guard来实现此目的，但是当我尝试通过界面访问（目标）url 时RouterStateSnapshot，我收到一个空字符串。

在下文中，stackblitz您将发现上述问题的最小重现性。（角度 15.1.2） https://stackblitz.com/edit/angular-ft2rvr

实施functional guard：

import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

export const authGuard = () => {
  const router = inject(Router);
  const oAuthService = inject(OAuthService);
  const hasAccessToken = oAuthService.hasValidAccessToken();
  const hasIdToken = oAuthService.hasValidIdToken();

  console.log('targeUrl', router.routerState.snapshot.url); // router.routerState.snapshot.url returns empty string

  if (!hasAccessToken || !hasIdToken) {
    router.navigate(['authenticate'], {
      state: {
        targetUrl: router.routerState.snapshot.url,
      },
    });
  }
  return hasAccessToken; …

您好，由于类防护已被弃用，我将其移至功能性，但我的测试失败了，我对 keycloak 的可注入服务和防护的参数感到非常困惑。

这是守卫：

export const authGuard: CanActivateFn = async (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Promise<boolean> => {
  const keycloak = inject(KeycloakService);
  const isLogged = await keycloak.isLoggedIn();

  if (!isLogged) {
    await keycloak.login({
      redirectUri: window.location.origin + state.url,
    });
    return false;
  }
  return true;
};

这是我的测试：

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';
import { authGuard } from './auth.guard';

describe('authGuard', () => …

我对我的网站有很多信任，所以为了建立安全的路由，我建立了下一个守卫：

export class TrustGuard implements CanActivate {
    constructor(private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return /*Check if user has the trust or not*/;
    }
}

所以，在路线中，我可以添加像 canActivate: [TrustGuard]

问题是我有太多的信任，因此我需要为每个信任建立一个守卫。所以我试图建立一个警卫工厂，以避免实施太多类似的警卫。

我的目标是找到设置路线的方式 canActivate: [FactoryTrustGuard(Trust.seeDashboard)]

有可能吗？

全部，

在实施身份验证保护之前，我能够在登录和注册屏幕中隐藏我的导航栏。通过读取 component.ts 中的路由事件并通过 ngIf 隐藏导航栏。在我实现了 auth guard 后，auth guard 到登录页面的路由没有隐藏下面的导航栏是我的代码..

在这里，我的 auth 守卫服务将检查用户是否通过 auth 服务（将从 cognito 获取数据）进行身份验证。现在，我怎样才能从 auth 守卫发生的路线中隐藏导航栏。请帮忙

应用程序组件.html

<app-toolbar *ngIf="isShowNavbar"   ></app-toolbar>

<router-outlet></router-outlet>

app.component.ts

import { Component,OnInit } from '@angular/core';
import {AuthorizationService} from "./authorization.service";
import { Router, ActivatedRoute, UrlSegment, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { first, distinctUntilChanged, throttleTime } from '../../node_modules/rxjs/operators';
@Component({
  // tslint:disable-next-line: component-selector
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  isLoggedIn$: Observable<boolean>; …