, next: HttpHandler) {
10 | const authToken = this.tokenService.getAuthorizationToken();
11 |
12 | if (authToken) {
13 | // Clone the request and replace the original headers with
14 | // cloned headers, updated with the authorization.
15 | const authReq = req.clone({
16 | headers: req.headers.set('Authorization', `Bearer ${authToken}`)
17 | });
18 | // send cloned request with header to the next handler.
19 | return next.handle(authReq);
20 | } else {
21 | // otherwise send request without token
22 | return next.handle(req);
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/front-end/src/app/login/login.component.css:
--------------------------------------------------------------------------------
1 | label {
2 | padding: 0.5em 1.5em;
3 | }
--------------------------------------------------------------------------------
/front-end/src/app/login/login.component.html:
--------------------------------------------------------------------------------
1 | Login Component
2 |
3 | Error from server : {{ error }}
4 |
5 | Generated token is
{{ token }}
6 |
7 | Please enter a symfony valid user
8 |
9 |
26 |
27 | Try to access to API after your're logged in.
28 |
29 |
--------------------------------------------------------------------------------
/front-end/src/app/login/login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoginComponent } from './login.component';
4 | import { ReactiveFormsModule } from '@angular/forms';
5 | import { HttpClientTestingModule } from '@angular/common/http/testing';
6 | import { RouterTestingModule } from '@angular/router/testing';
7 |
8 | describe('LoginComponent', () => {
9 | let component: LoginComponent;
10 | let fixture: ComponentFixture;
11 |
12 | beforeEach(async(() => {
13 | TestBed.configureTestingModule({
14 | imports: [
15 | ReactiveFormsModule,
16 | HttpClientTestingModule,
17 | RouterTestingModule
18 | ],
19 | declarations: [LoginComponent]
20 | }).compileComponents();
21 | }));
22 |
23 | beforeEach(() => {
24 | fixture = TestBed.createComponent(LoginComponent);
25 | component = fixture.componentInstance;
26 | fixture.detectChanges();
27 | });
28 |
29 | it('should create', () => {
30 | expect(component).toBeTruthy();
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/front-end/src/app/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormGroup, FormControl } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 |
5 | import { APIService } from '../api.service';
6 | import { TokenService } from '../token.service';
7 | import { Observable } from 'rxjs';
8 | import { HttpErrorResponse } from '@angular/common/http';
9 |
10 | @Component({
11 | selector: 'app-login',
12 | templateUrl: './login.component.html',
13 | styleUrls: ['./login.component.css']
14 | })
15 | export class LoginComponent implements OnInit {
16 | $login: Observable<{ token?: string }>;
17 | token: string;
18 | error: string;
19 |
20 | credentialsForm = new FormGroup({
21 | username: new FormControl(''),
22 | password: new FormControl('')
23 | });
24 |
25 | constructor(
26 | private apiService: APIService,
27 | private tokenService: TokenService,
28 | private router: Router
29 | ) { }
30 |
31 | ngOnInit() {
32 | this.token = this.tokenService.getAuthorizationToken();
33 | }
34 |
35 | onSubmit() {
36 | const credentials: { username: string; password: string } = this
37 | .credentialsForm.value;
38 |
39 | // Login should return jwt token
40 | this.$login = this.apiService.postCredentials(credentials);
41 |
42 | this.$login.subscribe(
43 | // Show generated token
44 | ({ token }) => {
45 | console.log('Received JWT token', token);
46 | this.tokenService.setAuthorizationToken(token);
47 | this.token = token;
48 | },
49 | // Show server error
50 | (error: HttpErrorResponse) => {
51 | console.error(error);
52 | this.error = error.message;
53 | }
54 | );
55 | }
56 |
57 | onLogout() {
58 | this.tokenService.cleanAuthorizationToken();
59 | this.token = null;
60 | return this.router.navigate(['']);
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/front-end/src/app/token.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { TokenService } from './token.service';
4 |
5 | describe('TokenService', () => {
6 | beforeEach(() => TestBed.configureTestingModule({}));
7 |
8 | it('should be created', () => {
9 | const service: TokenService = TestBed.get(TokenService);
10 | expect(service).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/front-end/src/app/token.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root'
5 | })
6 | export class TokenService {
7 | token: string;
8 | username: string;
9 | created: string;
10 | secret: string;
11 | wsseToken: string;
12 |
13 | constructor() { }
14 |
15 | hasAuthorizationToken(): boolean {
16 | const hasToken = !!this.token;
17 |
18 | return hasToken;
19 | }
20 |
21 | getAuthorizationToken(): string {
22 | // Generate a new token with new nonce each time otherwise it's a replay attack
23 | const token = localStorage.getItem('access_token');
24 | this.token = token;
25 | return this.token;
26 | }
27 |
28 | setAuthorizationToken(token: string) {
29 | // Save static parts of the token
30 | this.token = token;
31 | localStorage.setItem('access_token', this.token);
32 | }
33 |
34 | cleanAuthorizationToken() {
35 | // Clean token informations
36 | this.token = null;
37 | localStorage.removeItem('access_token');
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/front-end/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Acrecio/angular-symfony/df1f6f0785f32ee9037f63fb0e6cc7559b5760f8/front-end/src/assets/.gitkeep
--------------------------------------------------------------------------------
/front-end/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | server: 'http://0.0.0.0:8000',
3 | production: true
4 | };
5 |
--------------------------------------------------------------------------------
/front-end/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | server: 'http://0.0.0.0:8000',
7 | production: false
8 | };
9 |
10 | /*
11 | * For easier debugging in development mode, you can import the following file
12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
13 | *
14 | * This import should be commented out in production mode because it will have a negative impact
15 | * on performance if an error is thrown.
16 | */
17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
18 |
--------------------------------------------------------------------------------
/front-end/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Acrecio/angular-symfony/df1f6f0785f32ee9037f63fb0e6cc7559b5760f8/front-end/src/favicon.ico
--------------------------------------------------------------------------------
/front-end/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Symfony
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/front-end/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch(err => console.error(err));
14 |
--------------------------------------------------------------------------------
/front-end/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags.ts';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
--------------------------------------------------------------------------------
/front-end/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/front-end/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/front-end/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": [
6 | "node"
7 | ]
8 | },
9 | "files": [
10 | "src/main.ts",
11 | "src/polyfills.ts"
12 | ],
13 | "include": [
14 | "src/**/*.ts"
15 | ],
16 | "exclude": [
17 | "src/test.ts",
18 | "src/**/*.spec.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/front-end/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "plugins": [
15 | {
16 | "name": "typescript-tslint-plugin"
17 | }
18 | ],
19 | "typeRoots": [
20 | "node_modules/@types"
21 | ],
22 | "lib": [
23 | "es2018",
24 | "dom"
25 | ]
26 | },
27 | "exclude": [
28 | "node_modules"
29 | ],
30 | "angularCompilerOptions": {
31 | "fullTemplateTypeCheck": true,
32 | "strictInjectionParameters": true
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/front-end/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/front-end/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rules": {
4 | "array-type": false,
5 | "arrow-parens": false,
6 | "deprecation": {
7 | "severity": "warning"
8 | },
9 | "component-class-suffix": true,
10 | "contextual-lifecycle": true,
11 | "directive-class-suffix": true,
12 | "directive-selector": [
13 | true,
14 | "attribute",
15 | "app",
16 | "camelCase"
17 | ],
18 | "component-selector": [
19 | true,
20 | "element",
21 | "app",
22 | "kebab-case"
23 | ],
24 | "import-blacklist": [
25 | true,
26 | "rxjs/Rx"
27 | ],
28 | "interface-name": false,
29 | "max-classes-per-file": false,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-consecutive-blank-lines": false,
47 | "no-console": [
48 | true,
49 | "debug",
50 | "info",
51 | "time",
52 | "timeEnd",
53 | "trace"
54 | ],
55 | "no-empty": false,
56 | "no-inferrable-types": [
57 | true,
58 | "ignore-params"
59 | ],
60 | "no-non-null-assertion": true,
61 | "no-redundant-jsdoc": true,
62 | "no-switch-case-fall-through": true,
63 | "no-var-requires": false,
64 | "object-literal-key-quotes": [
65 | true,
66 | "as-needed"
67 | ],
68 | "object-literal-sort-keys": false,
69 | "ordered-imports": false,
70 | "quotemark": [
71 | true,
72 | "single"
73 | ],
74 | "trailing-comma": false,
75 | "no-conflicting-lifecycle": true,
76 | "no-host-metadata-property": true,
77 | "no-input-rename": true,
78 | "no-inputs-metadata-property": true,
79 | "no-output-native": true,
80 | "no-output-on-prefix": true,
81 | "no-output-rename": true,
82 | "no-outputs-metadata-property": true,
83 | "template-banana-in-box": true,
84 | "template-no-negated-async": true,
85 | "use-lifecycle-interface": true,
86 | "use-pipe-transform-interface": true
87 | },
88 | "rulesDirectory": [
89 | "codelyzer"
90 | ]
91 | }
--------------------------------------------------------------------------------