2

これが私のシナリオです：

ユーザーが というルートを訪れます/protected。私の CanActivate ガードでは、ユーザーがログインしているかどうかを確認します。ログインしていない場合は、ルートをレンダリングしたいのですが、アドレス バーには表示したままです。ユーザーが保護されたページと存在しないページを区別できないようにしたい。404 /protected

これは私が試したもので、うまくいきません。

@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(private router: Router, private userService: UserService) {}

  canActivate() {
    if (this.userService.getUser()) return true;

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

ルーティング後、アドレスバーにURLが表示されるの/404ですが、表示させたいです/protected。

アドレス バーの URL は ではなく以前の URL になるため、に変更してthis.router.navigate(['/404'], { skipLocationChange: true });も機能しません/protected。

私の質問は次のとおりです。ユーザーがログインしていない場合、アドレスバーにアクセスしようとしていた URL を保持しながら、別のコンポーネントをどのようにレンダリングしますか?

4

1 に答える 1

2

問題：

ユーザーがログインしていない場合、/protectedルートはエラー コンポーネントをレンダリングする必要があります。それ以外の場合は、別のコンポーネントをレンダリングします。

考えられる解決策:

/protected、/error、およびのルートとコンポーネントを定義し/page1ます。ユーザーがに到達したら、ログインしていない場合は/protectedに移動し、そうでない場合は に移動します。/error/page1

{ skipLocationChange: true }URL が別の場所に移動しないように、2 番目の引数として router に渡してください。/protected.

this.router.navigate([this.url], { skipLocationChange: true });

ノート：

CanActivate()チェックを追加する/protectedと、パスにアクセスできるかどうかが決まります。したがって、パスを開いたまま別のコンテンツを表示したいので、この場合は役に立ちません。

デモ：

https://plnkr.co/edit/6o2DPXmYfNiQEW2Kbr8A?p=preview

サンプルコード

@Component({
selector: 'app-protected',
template: `
    Location: {{href}} <br>
    Checking Login state ...
    <div *ngIf="url">Switching to {{url}}</div>
`,
})
export class AppProtected implements OnInit {
    url : string;
    href = window.location.href;

    constructor(private router : Router ) {
    }
    ngOnInit(){
        const isUserLoggedIn = /true/.test(localStorage.getItem('isUserLoggedIn'));
        this.url = isUserLoggedIn ? '/page1' : '/error';
        window.setTimeout(() => {
            this.router.navigate([this.url], { skipLocationChange: true });
        }, 2000);

    }
}

より詳しい情報：

于 2017-05-24T23:45:18.623 に答える