Home

Welcome to the 2017-12-angular-workshop-neuss wiki!

token.interceptor.ts

// token.interceptor.ts
import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const token = localStorage.getItem('access_token');
    const authRequest = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    });

    return next.handle(authRequest);
  }
}

AuthService

private settings = {
    authServer: 'https://angular-schule.eu.auth0.com',
    clientId: 'myb1GOMpODqAaBnS51F9YWhzL13pSyfx',
    redirectUri: 'http://localhost:4200',
    audience: 'https://api.angular.schule'
};

authorize() {
  const url = `${this.settings.authServer}/authorize?` +
    'response_type=token&' +
    `redirect_uri=${this.settings.redirectUri}&` +
    `client_id=${this.settings.clientId}&` +
    `audience=${this.settings.audience}`;

  window.location = url;
}


handleAuthentication() {
  this.route.fragment.pipe(
    filter(e => !!e),
    map(fragment => new URLSearchParams(fragment).get('access_token'))
  ).subscribe(token => {
      console.log('Token:', token);
      localStorage.setItem('access_token', token);
      window.location.hash = '';
    });
}

logout() {
  localStorage.removeItem('access_token');
  this.router.navigate(['/']);
}

getToken(): string {
  return localStorage.getItem('access_token');
}

get isAuthenticated() {
  return !!this.getToken();
}

Toggle Boostrap Nav

<nav [class.opened]="navIsOpen">...</nav>

  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(() => this.navIsOpen = false);
  }

  toggle() {
    this.navIsOpen = !this.navIsOpen;
  }