토큰이 유효하지 않은 경우 리디렉션

Question

인증을 위해 Angular2 및 Auth0을 사용하고 있습니다. 토큰이 로컬 저장소에 저장되는 것을 볼 수 있습니다. auth.service.ts 파일에 유효한 토큰을 확인한 다음 해당 구성 요소의 init에서 해당 함수를 호출하는 함수를 작성했습니다. 이 함수의 여러 변형을 시도했지만 올바르게 유효성 검사를 수행 할 수 없습니다.

로그인 한 후에도 유효한 토큰을 검색하고 로그인 할 때에도 홈 페이지로 다시 전달됩니다.

나의 목표는 유효한 토큰없이이 페이지에 액세스하는 것을 허용하는 것입니다. 그러나 유효한 토큰이있을 때이 페이지에 대한 액세스를 허용합니다.

이 내가 현재 시도 것입니다,

auth.service.ts

import { Injectable }      from '@angular/core'; 
import { Router, CanActivate }    from '@angular/router'; 
import { tokenNotExpired, JwtHelper }  from 'angular2-jwt'; 
import { myConfig }      from './auth.config'; 

// Avoid name not found warnings 
declare var Auth0Lock: any; 

var options = { 
    theme: { 
    logo: '../assets/img/logo.png', 
    primaryColor: '#779476' 
    }, 
    auth: { 
    responseType: 'token', 
    redirect: true, 
    redirectUrl: "http://localhost:3000/dashboard", 
    }, 
    languageDictionary: { 
    emailInputPlaceholder: "email@example.com", 
    title: "Login or SignUp" 
    }, 
}; 

@Injectable() 
export class Auth { 

    // Configure Auth0 
    lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options,{}); 

    constructor(private router: Router) { 
    // Add callback for lock `authenticated` event 
    this.lock.on('authenticated', (authResult) => { 
     localStorage.setItem('jwtToken', authResult.idToken); 
    }); 
    } 

    public login() { 
    this.lock.show(); 
    }; 

    public authenticated() { 
    return tokenNotExpired(); 
    }; 

    public isAuthenticated(): boolean { 
    try { 
     var jwtHelper: JwtHelper = new JwtHelper(); 
     var token = this.accessToken; 
     if (jwtHelper.isTokenExpired(token)) 
      return false; 
     return true; 
    } 
    catch (err) { 
     return false; 
    } 
    } 

    private get accessToken(): string { 
     return localStorage.getItem('jwtToken'); 
    } 

    public logout() { 
    localStorage.removeItem('jwtToken'); 
    }; 
} 

guard.service.ts

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

@Injectable() 
export class Guard implements CanActivate { 

    constructor(protected router: Router, protected auth: Auth) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
     if (state.url !== '/pages/home' && !this.auth.isAuthenticated()) { 
      this.auth.logout(); 
      this.router.navigate(['/pages/home']); 
      return false; 
     } 
     return true; 
    } 
} 

app.routing.ts

import {Guard}       from "./services/guard.service"; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'pages/home', 
     pathMatch: 'full', 
    }, 
    { 
     path: '', 
     component: FullLayoutComponent, 
     canActivate: [Guard], 
     data: { 
      title: 'Home' 
     }, 
     children: [ 
      { 
       path: 'dashboard', 
       component: DashboardComponent, 
       data: { 
        title: 'Dashboard' 
       } 
      }, 

app.module.ts

import { Guard }      from "./services/guard.service"; 
import { Auth }       from "./services/auth.service"; 

providers: [ 
    Guard, 
    Auth 
    ], 

Answer 1

올바른 방법이 가드

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { AuthService } from './authService'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(protected router: Router, protected authService: AuthService) { 

    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 

     if (state.url !== '/login' && !this.authService.isAuthenticated()) { 
      this.authService.logOut(); 
      this.router.navigate(['/login']); 
      return false; 
     } 

     return true; 
    } 
} 

를 사용하고 rotes에서 할 수 달성

path: 'admin', 
     component: AdminPages.AdminPagesComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { 
       path: 'dashboard', 
       component: Dashboard, 
       data: { 
        menu: { 
         title: 'Dashboard', 
         icon: 'ion-android-home', 
         selected: false, 
         expanded: false, 
         order: 0 
        } 
       } 
      }, 

authservice

나는 당신의 도움을 주셔서 감사합니다

public isAuthenticated(): boolean { 
    try { 
     var jwtHelper: JwtHelper = new JwtHelper(); 
     var token = this.accessToken; 
     if (jwtHelper.isTokenExpired(token)) 
      return false; 
     return true; 
    } 
    catch (err) { 
     return false; 
    } 
} 

public logOut(): void { 
    localStorage.removeItem("access_token"); 
} 

private get accessToken(): string { 
     return localStorage.getItem('access_token'); 
    } 



private saveJwt(jwt): void { 
     if (jwt) { 
      localStorage.setItem('access_token', jwt) 
     }   
    } 
    public login(loginModel: LoginModel): Promise<void> { 
     return new Promise<void>((resolve, reject) => { 
      var username = loginModel.email; 
      var password = loginModel.password; 
      var creds = 
       "username=" + username + "&password=" + password + "&client_id=" + this.clientId + "&grant_type=" + this.grant_type; 
      var headers = new Headers(); 
      headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
      this.httpClient.post(this.identityServerUrl + "/connect/token", creds, { headers }) 
       .toPromise() 
       .then(response => { 
        this.saveJwt(response.json().access_token); 
        resolve(); 
       }) 
       .catch(err => { 
        reject(err.json().error_description) 
       }); 
     }); 
    }