0

Angular 2 ルーター - ログアウトし、ユーザーがログインしたページに移動しようとすると、リダイレクトするには app.ts が必要です。

angular 2でtypescriptを使用しています。

何らかの理由で、リダイレクトが一部のページで機能します。しかし、コンストラクターにコードがあると、それがヒットします。ログインしていない場合、ユーザーをすぐにホームページにリダイレクトしたい.

ログインしているかどうかを確認し、app.ts ファイルにログインしていない場合は、次のコードを実行します。

       this.router.navigate(['Home']);

これは基本的なページでは機能しますが、たとえば検索ページにアクセスしようとすると、コンポーネント コンストラクターにアクセスするためにコンソール エラーが発生します。

これは、app.ts ファイルのルート構成です。

 @RouteConfig([
     { path: '/', component: Home, as: 'Home'},
     { path: '/home', component: Home, as: 'Home' },
     { path: '/login', component: Login, as: 'Login' }, 
     { path: '/register/:id', component: Register, as: 'Register' },
     { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
     { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
     { path: '/search', component: SearchJobs, as: 'Search' },  
     {path:'/**', redirectTo: ['Home']}
 ])
4

3 に答える 3

0

あなたはすでにこのトピックに何かを投稿しましたが、他の人がもっと見ているものである場合に備えて、ここで答えます. @CanActivate デコレータを利用して、ユーザーをリダイレクトできます。これが行うことは、コンポーネントの初期化の前に実行されることです。関数が true を返す場合、コンポーネントはロードされ、それ以外の場合はリダイレクトされます。あなたが設定したルートに行くと思いますuseAsDefault :true;

export CanActivate(options : CanActivateAnnotation) : (hook: (next: ComponentInstruction, prev: ComponentInstruction) =>
                     Promise<boolean>| boolean) => ClassDecorator

@CanActivate((next, prev) => {
      // This must prove to be true for the component @ this route to load
      if(next.urlPath != '/Login'){ 
         return Promise.resolve(this._authService.getIsAuth() 
         && localStorage.getItem('authToken')
      }
      /*
       If CanActivate returns or resolves to false, the navigation is 
       cancelled. If CanActivate throws or rejects, the navigation is also
       cancelled. If CanActivate returns or resolves to true, navigation 
       continues, the component is instantiated, and the OnActivate hook of 
       that component is called if implemented.
      */
   }
);
于 2016-01-13T06:02:09.117 に答える
0

求めているように、以下のコードを app.ts に書き込む必要があります。

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';

export class AppComponent  {
    constructor(router:Router){
       this.router=router;
       this.router.subscribe((nextValue) => {
       console.log(nextValue)
       if (nextValue !== 'login' && !autheService.isAuthenticated) {
                      this.router.navigate(['/Login']);
       }
}

ここを見てください plnkr

angular1を検討する場合。我々は持っています、

$scope.$on('$routeChangeStart', function(next, current) { 
   ... you could trigger something here ...
 });

ルートが失敗した場合などのその他のイベントは、ui.router を使用してルーティングを処理します。したがって、Angular1 を上記のコードに置き換えることができます。

あなたが求めていることは、これによって最小限の努力で達成できると思います。それでも @canActive 他のポイントは有効です。

これが役立つことを願っています。

于 2016-01-13T06:16:49.380 に答える
0

RC4 バージョンを使用している場合は、CanActivate インターフェイスを確認してください

CanActivate インターフェイスを実装するクラスを作成し、のcanActivateプロパティを使用してルートを保護する必要があります。RouterConfig

例については、最新のルーターのドキュメントを確認してください。

于 2016-07-20T06:57:53.740 に答える