ユーザがブラウザタブでURLを手動で変更した場合の経路指定を防止する

Question

ユーザがブラウザタブで経路を手動で変更してEnterキーを押したときに発生する問題に悩まされています。これにより、私のui-router/angular2-routerはユーザによって入力された状態にナビゲートされます。私はこれを防ぎ、自分のウェブサイトのボタンクリックで実装したフローを通してのみルーティングを許可します。

Answer 1

その2018！角度5はここにあり、この問題の解決策もあります。 BAMM CanActivateクラスが実装できるインターフェイスで、ルートをアクティブ化できるかどうかを判断するガードです。

私たちは、この機能を追加し、定義した条件に基づいていくつかのルートへのアクセスを禁止することができます。 CanActivateインタフェースを実装し、canActivateメソッドを定義するAuthGuardなどのサービスを、ルートコンフィグレーションに追加することができます。ここで

const appRoutes: Routes = [ 
    { path: 'crisis-center', component: CrisisListComponent }, 
    { 
    path: 'heroes', 
    canActivate: [AuthGuard], 
    component: HeroListComponent, 
    data: { title: 'Heroes List' } 
    }, 
    { path: '', 
    redirectTo: '/heroes', 
    pathMatch: 'full' 
    }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

ルートheroesとそのすべての子供たちがguradの層を持っている：我々はいくつかの条件に対してへのアクセスを保護するルートを持っている場合は、次のよう

class Permissions { 
    canGoToRoute(user: UserToken, id: string): boolean { 
    return true; 
    } 
} 

@Injectable() 
class AuthGuard implements CanActivate { 
    constructor(private permissions: Permissions, private currentUser: UserToken) {} 

    canActivate(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Observable<boolean>|Promise<boolean>|boolean { 
    return this.permissions.canGoToRoute(this.currentUser, route.params.id); 
    } 
} 

は、我々はガードを追加しますその上。したがって、AuthGuardサービスによって返されるブール値に基づいて、ユーザーはこのルートへのアクセスを許可または拒否されます。

Answer 2

このコードをapp.jsに書き込みます。

.run(['$rootScope', '$state', '$stateParams','LoginStatusService',function($rootScope, $state, $stateParams,LoginStatusService) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 

    $rootScope.$on('$stateChangeSuccess', function(event, toState) { 
     //Write Routes login here 
     if(LoginStatusService.getUserStatus()===false){ 
      $state.go('core.login'); 

     } 
    }); 
}]) 

Answer 3

$stateChangeStartイベントは、これを処理するための適切な場所です。このイベントは、URLに移動しようとすると発生します。その時点で、ユーザーが認証されているかどうかを確認し、認証されていない場合は、ログインし直すことができます。あなたはこのようなイベントにフックアップでしょう

：

angular 
    .module('myApp') 
    .run(function ($rootScope, $state, authFactory) { 
    $rootScope.$on('$stateChangeStart', function() { 
     //if user is not logged in 
     if(!authFactory.isAuthed()){ 
     $state.go('login') 
     } 
    }) 
    }); 

はそれがお役に立てば幸いです。