Angular2 - la meilleure Façon de gérer expiré jeton d'authentification?

Généralement je fournir un HttpService moi-même au lieu d'utiliser Http directement. Donc, avec votre besoin, je peux fournir mon propre get() méthode de la chaîne de l'authentification avant de les envoyer tout de véritables requêtes HTTP.

Ici, c'est le service:

@Injectable()
class HttpService {
  constructor(private http: Http, private auth: Authentication) {}

  public get(url: string): Observable<Response> {
    return this.auth.authenticate().flatMap(authenticated => {
      if (authenticated) {
        return this.http.get(url);
      }
      else {
        return Observable.throw('Unable to re-authenticate');
      }
    });
  }
}

Ici est le composant pour appeler le service:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <button (click)="doSomething()">Do Something</button>

  <div [hidden]="!auth.showModal">
  <p>Do you confirm to log in?</p>
  <button (click)="yes()">Yes</button><button (click)="no()">No</button>
  </div>
  `,
})
export class AppComponent {
   name = 'Angular';

   constructor(private httpSvc: HttpService, public auth: Authentication) {}

   ngOnInit() {
   }

   doSomething() {
     let a = this.httpSvc.get('hello.json').subscribe(() => {
       alert('Data retrieved!');
     }, err => {
       alert(err);
     });
   }

   yes() {
    this.auth.confirm.emit(true);
   }

   no() {
     this.auth.confirm.emit(false);
   }
}

En enchaînant les observables, les Authentication service détermine s'il convient d'interrompre le flux normal de montrer le modal (même si actuellement seulement la vie avec l'Application, il peut certainement être mises en œuvre séparément). Et une fois qu'une réponse est reçue à partir de la boîte de dialogue, le service peut reprendre le flux.

class Authentication {
  public needsAuthentication = true;
  public showModal = false;
  public confirm = new EventEmitter<boolean>();

  public authenticate(): Observable<boolean> {
    //do something to make sure authentication token works correctly
    if (this.needsAuthentication) {
      this.showModal = true;
      return Observable.create(observer => {
        this.confirm.subscribe(r => {
          this.showModal = false;
          this.needsAuthentication = !r; 
          observer.next(r);
          observer.complete();
        });
      });
    }
    else {
      return Observable.of(true);
    }
  }
}

J'ai un live complet exemple ici.

http://plnkr.co/edit/C129guNJvri5hbGZGsHp?open=app%2Fapp.component.ts&p=aperçu

OriginalL'auteur yuxhuang

Après je fais un login et recevez un jeton (qui dans mon cas expire dans 60 minutes), j'ai mis un intervalle qui vérifie toutes les minutes pour voir si 59 minutes ont passé. Si oui, puis-je ouvrir une boîte de dialogue de connexion.

L'idée, cependant, est la boîte de dialogue de connexion n'est pas une route, mais juste une superposition qui s'ouvre sur le dessus de n'importe quel écran de l'utilisateur arrive à être sur (donc j'ai mis le composant login dans le code html de l'application composant racine, et l'utilisation d'une observable pour appeler la boîte de dialogue de connexion à partir de n'importe où dans l'application).

Lorsque l'utilisateur a correctement re-connexions, j'ai fermer la boîte de dialogue de connexion et l'utilisateur va gaiement sur leur chemin avec n'importe quel écran, ils ont été à l'aide avant de vous connecter à nouveau.

Je ne sais pas si c'est une "meilleure pratique", mais il fonctionne dans la situation que vous décrivez. Laissez-moi savoir et je peux mettre le code.

OriginalL'auteur brando

Bien, le rechargement est simple: (<any>window).location.reload(true);

C'est une bonne idée de montrer login/mot de passe pop-up et permettre à l'utilisateur de continuer à travailler s'il peut fournir un mot de passe, si l'utilisateur clique sur annuler, il suffit de ne rediriger vers la page de connexion.

Il y a aussi des problèmes de connexion, les délais, erreurs de serveur. Le problème est qu'il est difficile d'implémenter de manière fiable la bonne manipulation à l'aide Angulaire 2 Http module et rxjs. Personnellement, j'ai renoncé à l'aide de Http module, parce que son erreur de manipulation a une mauvaise conception et réalisation de mes propres module http, ce qui permet configurable de gestion des erreurs et transparent tentatives.

OriginalL'auteur kemsky