3

ルートにアクセスチェックを入れて、実際のページではなくアクセス拒否ページを表示しようとしています。以下の例から、ルート クリックでアクセスが拒否されたことを警告できます。実際のページに移動してから、アクセスが拒否されたと表示したいと思います。

http://plnkr.co/edit/w1NCkGs0Tv5TjivYMdvt?p=preview

アクセス チェック付きの URL が で/admin/manageusers、コンポーネント名がManageUserComponentであるとしましょう。ユーザーがアクセス権を持っておらず、URL を試行した場合、ルートに移動する/admin/manageusers 必要がありますが、表示されるはずAccess Denied in the pageです。

1.私ができることの1つは、ルートresolve機能を使用して、ユーザーのアクセスに関連する値を取得しManageUserComponent、テンプレートを切り替えて切り替えることです。このアプローチは、アクセスロジックを実装したいルートに関連付けられた複数のコンポーネントに同様のコードを持つことになります。

  1. componentアクセスチェックが必要なすべての場所を別のものに拡張しbase class、上記のロジックを検証し、成功した場合は子コンポーネントを続行できるようにします。別のクラスを適切に拡張する方法をまだ理解していない

主な目標は、アクセスした URL をページ内のエラー メッセージと共に保持することです。そして、コンポーネント関数は実行されるべきではありません。

実装するアプローチとオプションを考えられる場合は、共有してください。

説明が明確でない場合はお知らせください。改善に努めます。

4

2 に答える 2

4

app-routing.module.ts でこのようなことができます

// PRIVATE ROUTES
{
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [LoggedInGuard]
},

次に、この LoggedInGuard サービスを定義します

// logged-in.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(
        private _router: Router,
        private _authService: AuthService) { }

    canActivate() {
        // return true
        if (this._authService.isLogged()) {
            // all ok, proceed navigation to routed component
            return true;
        }
        else {
            // redirect to the homepage
            this._router.navigate(['/']);
            // abort current navigation
            return false;
        }
    }
}

これがあなたを助けることを願っています。

于 2016-12-22T11:13:28.317 に答える
0

1) CanActivate ロジックを実装する

2) 保護されたコンポーネントを実装し、それにルートを追加します (例: 'denied')。

3) skipLocationChange オプションを使用してルーター内を移動します

@Injectable()
export class CanActivateRequestForm implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
  let obs = this.authService.userChange.asObservable().map(user => user.role === Role.Admin);
        obs.subscribe(v => {
        if (!v)
          this.router.navigate(['denied'], {
            skipLocationChange: true
          });
      });
      return obs;
    }
  }
于 2017-01-12T04:35:26.290 に答える