Accès à la sécurité dans l'application Angular de NativeScript

Question

Je commence à apprendre NativeScript Angular (Je suis habitué à développer une application Web/des sites Web en utilisant Angular) et je suis toujours confus sur la façon de créer un accès restreint sur l'application NativeScript, ou pour restreindre un itinéraire spécifique et/ou des ensembles d'itinéraires.

Par exemple, j'utilise angulaire uiRouter pour définir certaines données, comme ceci:

data: { 
    requireLogin: true 
} 

Dans chaque transition de page Je vérifie s'il y a un jeton valide pour l'accès à cette garantie utilisateur. Sur le NativeScript je pensais à ce sujet et pourrait faire la même chose, je ne sais pas, puisque je suis très nouveau à NativeScript et je ne sais pas si cela irait à l'encontre des meilleures pratiques, ou des scénarios de sécurité communs.

Par exemple, je vais établirons le jeton sur la Application Settings après la connexion, quelque chose comme ceci:

submit() { 
    // process the login here 
    if (success) { 
     setString(AppSettings.authToken, authToken); 
    } 
} 

Et puis je fixerait les routes d'avoir une route parent avec un composant parent où je vais vérifier ce jeton, par exemple:

export class ParentComponent implements OnInit { 
    constructor() {} 

    ngOnInit() { 
     if (!getString(AppSettings.authToken)) { 
      return this.router.navigate(["/login"]); 
     } 
    } 
} 

de cette façon, je vérifier si l'utilisateur dispose d'une session valide pour accéder à l'application sur une zone restreinte.

Cependant, par exemple, dans une application Angular normale, j'utilise également l'intercepteur, pour vérifier chaque demande http si le authToken est toujours valide.

Comment suis-je censé faire dans ce cas?

J'ai essayé de trouver le matériel sur NativeScript Angular sécurité mais je n'ai trouvé aucun. Y at-il un endroit où je peux en lire plus à ce sujet?

Que devrais-je avoir à l'esprit lorsque je suis confronté à ce type de scénario?

Answer 1

Vous pouvez utiliser route guards

exemple de base de la garde d'itinéraire canActivate dans NativeScript

class AuthGuard implements CanActivate { 
    constructor(
     private loginService: LoginService, 
     private nav: RouterExtensions) { 
    } 

    canActivate() { 
     if (this.loginService.isLogged) { 
      console.log("AuthGuard: authenticated"); 
      return true; 
     } else { 
      console.log("AuthGuard: redirecting to login"); 
      this.nav.navigate(["/login"]); 
      return false; 
     } 
    } 
} 

Sur la base de cette test application

The same deal dans une véritable application de démonstration de l'angle. Here correspond à l'utilisation réelle de cette protection dans l'application Sample-Groceries.