Question

我正在使用Auth0和angular2-jwt进行登录，我正在尝试实施CanActivate以在用户登录时阻止路由。
我已经在navbar.component中实现了登录代码，并试图弄清楚如何使其更加模块化。我有一些服务的例子，但没有一个符合这种情况，所以这就是我来到这里的原因。

所以我认为有两个步骤：

实施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
];

Answer 1

喜欢解决方案httplib2：

Auth.Guard.ts

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

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

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

1 个答案: