Angular2将组件拆分为服务并添加AuthGuard

克里斯蒂安·穆斯卡卢（Cristian Muscalu）

我正在使用Auth0和angular2-jwt用于登录，并且我正在尝试实现CanActivate以在用户登录时阻止路由。
我已经在navbar.component中实现了登录代码，并试图弄清楚如何使其更具模块化。我有一些有关服务的示例，但没有一个与这种情况相匹配，因此这就是我来这里的原因。

所以我认为有2个步骤可以做到：

实现AuthGuard来阻止路由。
将此组件拆分为服务，以便它可以向AuthGuard发送指令以阻止或允许路由，具体取决于是否登录用户。

我希望有人能给我一个解决方案，我可以从中学习。谢谢你。

Navbar.component.ts：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, CanActivate  } from '@angular/router';
import {tokenNotExpired, JwtHelper} from 'angular2-jwt';

declare var Auth0Lock;

@Component({
   moduleId: module.id,
   selector: 'navbar',
   template : `
    <button *ngIf="!loggedIn()" (click)="login()">Login</button>
    <button *ngIf="loggedIn()" (click)="logout()">Logout</button>

    <a *ngIf="loggedIn()" [routerLink]="['/users']">Users</a>

   <button *ngIf="!loggedIn()" (click)="login()" class="btn btn-danger">Login</button>
   <button *ngIf="loggedIn()" (click)="logout()" class="btn btn-default">Logout</button>
  `,
  directives: [ROUTER_DIRECTIVES] 
})

export class NavbarComponent{
  lock = new Auth0Lock('xxxxxxxxxxxxxxxxx','yyyyyyyyyyyyyy')
  jwtHelper: JwtHelper = new JwtHelper();
  location: Location;
  profile : any;

constructor(){
  this.profile = JSON.parse(localStorage.getItem('profile'));
}

login(){
 var self = this;
 this.lock.show((err: string, profile: string, id_token: string) =>{
   if (err){
     throw new Error(err);
   }

   localStorage.setItem('profile', JSON.stringify(profile));
   localStorage.setItem('id_token', id_token);  

     self.loggedIn();
 });
}

logout(){
  localStorage.removeItem('profile');
  localStorage.removeItem('id_token');

  this.loggedIn();
}

loggedIn(){
  return tokenNotExpired();
 }
 }

auth.guard.ts：

import { CanActivate }    from '@angular/router';
export class AuthGuard implements CanActivate {
  canActivate() {
    return true;
  }
}

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import {UsersComponent} from './users/users.component';
import {AuthGuard} from './navbar/auth.guard';

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },            
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  AuthGuard
];

克里斯蒂安·穆斯卡卢（Cristian Muscalu）

在这里找到解决方案：

验证卫士

import { CanActivate }    from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';

export class AuthGuard implements CanActivate {
  canActivate() {
      if (tokenNotExpired()) {
        return true;
      }
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。