D'empêcher le routage dans Angulaire lorsque l'utilisateur modifie manuellement l'url dans l'onglet du navigateur

Je suis coincé dans un problème qui se produit lorsque l'utilisateur modifie manuellement la route dans l'onglet du navigateur et appuie sur entrée. Cela force mon ui-router/angular2-routeur pour naviguer jusqu'à l'état entrés par l'utilisateur. Je veux éviter cela et de permettre uniquement le routage à travers le flux j'ai mis en œuvre par le clic sur un bouton dans mon site web.

  • pas possible sans l'aide de certains sale.
  • veuillez indiquer, le cas échéant.
  • Il est tout à fait possible, merci de passer par ce lien github.com/angular-ui/ui-router/wiki.. Tout ce que vous devez écouter $stateChnageStart événement qui angulaire de feu à chaque fois qu'il y a un changement dans la navigation et à écrire un peu de logique pour arrêter la navigation.
  • non, il n'est pas possible parce que vous pouvez tout simplement venir à une page web sans être à l'intérieur de anguleuses et.
  • Il est très possible, comme je l'ai dit, vous avez besoin de droit de la logique de la droite après l'écoute de l'événement. Si quelque chose de mal, de garder de l'utilisateur sur la même url d'autre accédez à de nouvelles url. je crois que j'ai fait.
  • Peut $stateChangeStart obtenir certains param transmises par l'angle de routeur? Si la valeur est true, alors vous pouvez utiliser le paramètre de juger si le changement d'état déclenché par angulaire ou manuellement par l'utilisateur?

InformationsquelleAutor Vishal Gulati | 2016-03-29
  1. 7

    Sa 2018! Angulaire 5 est ici et c'est donc la solution à ce problème. BAMM son CanActivate Interface qu'une classe peut mettre en œuvre pour être un gardien de décider si une route peut être activé.

    Nous pouvons ajouter cette fonctionnalité et d'empêcher l'accès à certains de nos itinéraires sur la base des conditions nous définir. Un service, par exemple pour AuthGuard qui implémente l'CanActivate interface et définit les canActivate méthode peut être ajouté à l'itinéraire de configuration.

    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);
  }
}

    Si nous avons un itinéraire que nous voulons protéger l'accès à l'encontre de certaines condition, nous ajoutons la garde comme suit:

    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 }
];

    Voici l'itinéraire heroes et tous ses enfants ont une couche de garde sur elle. Donc basée sur la valeur booléenne renvoyée par la AuthGuard service de l'utilisateur sera autorisé ou refusé l'accès à cette route.

    InformationsquelleAutor Vishal Gulati
  2. 3

    Vous pouvez importer routeur dans le constructeur d'un gardien. Ce routeur instance aura l'URL actuelle. ActivatedRouteSnapshot et RouterStateSnapshot dans canActivate contiendra l'URL que l'utilisateur tente d'accéder.

    L'exemple ci-dessous permet d'empêcher les utilisateurs d'accéder directement à un parcours extérieur de la page.

    import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DirectAccessGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    //If the previous URL was blank, then the user is directly accessing this page
    if (this.router.url === '/') {
      this.router.navigate(['']); //Navigate away to some other page
      return false;
    }
    return true;
  }
}

    Ajouter cette garde à votre module de routage

    { path: 'signup/:type/:step', component: SignupComponent, canActivate: [DirectAccessGuard] }
    • je suis arriver à une situation de blocage ici
    InformationsquelleAutor Scott Reed
  3. 0

    La $stateChangeStart événement est le lieu approprié pour gérer cela. Cet événement se déclenche lorsque vous essayez d'accéder à un URL. À ce stade, vous pouvez vérifier si l'utilisateur est authentifié, et si non, faire rebondir le retour à l'enregistrement.

    Vous raccordez l'événement comme celui-ci :

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

    Espère que cela aide.

    • Merci pour votre solution, mais la chose est que l'utilisateur est authentifié, je veux juste de l'empêcher d'accéder à des états-unis de modifier manuellement l'url. De cette façon, il peut atteindre un état qui aurait obtenu des données à partir de l'écran précédent dans l'ordre, mais en raison de brusques de routage il sera vide.
    InformationsquelleAutor M. Junaid Salaat
  4. -1
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.auth.fnGetToken()) { //check token
            const role = this.auth.fnGetLoginUser(); //get login user data
            if (role.selRole !== 'admin' && (state.url === '/users' || state.url === '/users/')) {
                this.router.navigate(['contacts']);
                return false;
            } else {
                return true;
            }
        } else {
            this.router.navigate(['Login']);
            return false;
        }
    }
    • Veuillez fournir un contexte dans votre réponse si l'OP sait comment votre solution permet de résoudre son/son problème
    InformationsquelleAutor Pankaj Faliyachi