Skip to content

Home

Jump to bottom
Johannes Hoppe edited this page Aug 18, 2017 · 19 revisions

token-interceptor.service.ts

// app.module.ts
  providers: [
    BookStoreService,
    AuthService,
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }
  ]
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('access_token');
    const newRequest = request.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });

    return next.handle(newRequest);
  }
}

auth.service.ts

import { URLSearchParams } from '@angular/http';
import { Injectable, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

declare var window: any;

@Injectable()
export class AuthService {
  private settings = {
    authServer: 'https://angular-schule.eu.auth0.com',
    clientId: 'myb1GOMpODqAaBnS51F9YWhzL13pSyfx',
    redirectUri: 'http://localhost:4200',
    audience: 'https://api.angular.schule'
  };

  constructor(private route: ActivatedRoute, private router: Router) {}

  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
      .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(['/']);
  }
}

START!

npm run build

src/sass/style.scss

@import '~bootstrap/scss/bootstrap.scss';

body {
  color: red;
}

src/js/main.js

require("../sass/style.scss")

console.log("hallo!")

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: ['./js/main.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].min.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // creates style nodes from JS strings
          { loader: "style-loader" },
          // translates CSS into CommonJS (javascript modul)
          { loader: "css-loader", options: { sourceMap: true } },
          // compiles Sass to CSS
          { loader: "sass-loader", options: { sourceMap: true } }
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ['file-loader']
      }]
  },
  resolve: {
    modules: ['node_modules']
  }
};

package.json

{
  "name": "webpack-playground",
  "version": "1.0.0",
  "description": "a playground",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "private": true,
  "license": "UNLICENSED",
  "dependencies": {
    "bootstrap": "4.0.0-beta",
    "css-loader": "0.28.4",
    "node-sass": "4.5.3",
    "jquery": "3.2.1",
    "sass-loader": "6.0.6",
    "file-loader": "0.11.2",
    "style-loader": "0.18.2",
    "webpack": "3.2.0",
    "webpack-dev-server": "2.5.1",    
    "font-awesome": "^4.7.0",
    "roboto-fontface": "0.8.0"
  }
}

Linkliste

HTML5


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<title>HTML5 Logo</title>
	<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
	<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
</svg>

5 Tage - Themen

  • HTML5, CSS3, Bootstrap & Less ✔️
  • TypeScript ✔️
  • Angular 4 Features & Konzepte ✔️
  • Angular-CLI & WebPack ✔️
  • Komponenten ✔️
  • Direktiven ✔️
  • Routing
  • Formulardaten & Events ✔️
  • Unit-Tests & Oberflächentests ✔️
  • Kendo UI
  • Dependency Injection & Services
  • Formularverarbeitung
  • Deployment
  • Authentifizierung mit OAuth
Clone this wiki locally