Home
/
Packages
/
ng-los

ng-los

Plantilla desarrollada con [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.

ng-los

Plantilla desarrollada con Angular CLI version 6.0.8.

Introducción

Requisitos

Es necesario que todas las aplicaciones generadas con CLI de Angular vengan con estilos de capa de SCSS.

Plantilla de seguridad versión 1

Instalación

npm

npm i --save @angular/[email protected] @angular/[email protected] apollo-angular-boost graphql linq lodash ng-los-auth-v1 ng-los-auth-v2 ng-los bootstrap jquery popper.js devextreme devextreme-angular

yarn

yarn add --save @angular/[email protected] @angular/[email protected] apollo-angular-boost graphql linq lodash ng-los-auth-v1 ng-los-auth-v2 ng-los bootstrap jquery popper.js devextreme devextreme-angular

Implementación

En el archivo src/index.html es necesario agregar la fuente de estilos de iconos de Material Design en el encabezado <head> del html.

<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

En el archivo src/styles.scss es necesario agregar las siguientes lineas

@import "~bootstrap/scss/bootstrap";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.snackbar-success {
	background: green;
	text-decoration-color: white;
	font-weight: bold;
	text-align: center;
}
.snackbar-error {
	background: red;
	text-decoration-color: white;
	font-weight: bold;
	text-align: center;
}
.snackbar-warning {
	background: #ffae42;
	text-decoration-color: white;
	font-weight: bold;
	text-align: center;
}

src/enviroments/enviroment.ts y src/enviroments/enviroment.prod.ts archivo de configuración de ambientes de la aplicación, se tendrá que tener la siguiente estructura:

export  const  environment = {
	production:  false, // Cambiar a true en prod
	version:  1, // Versión de sistema de seguridad que se utilizará

	urls: {
		base:  'http://localhost:4200/#/', // Preguntar por URLS
		login:  'http://localhost:4200/#/', // Preguntar por URLS
		resources:  '', // Preguntar por URLS
		v1: {
			auth:  '', // Preguntar por URLS
			public:  ''  // Preguntar por URLS
		},
		v2: {
			auth:  '', // Preguntar por URLS
			public:  ''  // Preguntar por URLS
		}
	},

	application: {
		appId:  '150', // Identificador de base de datos de la Aplicación
		name:  'Seguridad LOS (dev)', // Nombre de la aplicación
		audience:  'f38998acaf454c8cbb1e1b490ae3f871', // ClientId de la aplicación
		publicKey:  '', // Lave pública de la aplicación
		// Menús de la aplicación (solo aplica para la version 1 de seguridad)
		menus: [
			{
				name:  'Home',
				path:  '',
				icon:  'public',
				isDropDown:  false,
				childs: [],
				handle:  null
			},
			{
				name:  'About',
				path:  'about',
				icon:  'error',
				isDropDown:  false,
				childs: [],
				handle:  null
			},
			{
				name:  'Protected',
				path:  'protected',
				icon:  'lock',
				isDropDown:  false,
				childs: [],
				handle:  null,
				roles: [
					'123',
					'124'
				]
			},
			{
				name:  'Function',
				path:  '',
				icon:  'touch_app',
				isDropDown:  false,
				childs: [],
				handle: () => {
					console.log('Pusalte el botón en el menú');
				},
				handleIcon:  'warning'
			},
			{
				name:  'Sub Menu',
				path:  '',
				icon:  'folder',
				isDropDown:  true,
				childs: [
					{
						name:  'Home',
						path:  '',
						icon:  'public',
						isDropDown:  false,
						childs: [],
						handle:  null
					},
					{
						name:  'About',
						path:  'about',
						icon:  'error',
						isDropDown:  false,
						childs: [],
						handle:  null
					},
					{
						name:  'Protected',
						path:  'protected',
						icon:  'lock',
						isDropDown:  false,
						childs: [],
						handle:  null
					}
				],
				handle:  null
			}
		]
	},

	header: {
		buttonNavMenuVisible:  true, // Activa o desactiva el botón de menú
		buttonThemeVisible:  false, // Activa o desactiva el botón para cambiar de color de tema
	},

	sideMenu: {
		selectRoomVisible:  true, // Activa o desactiva la selección de salas
		navSideMenuOpen:  true, // Menú abierto o cerrado
		navAppsMenuOpen:  false  // Menú de aplicaciones abierto o cerrado
	},

	footer: {
		title:  'from LOS Team', // Titúlo en el pie de página
		icon: {
			name:  'favorite', // Icono de pie de página (Material Icon)
			visible:  true  // Activa o desactiva icono
		}
	}
};

Generar 3 componentes básicos (opcionales, afecta tambien el siguiente paso de generación de rutas).

ng g c components/home
ng g c components/about
ng g c components/protected

src/app/app.routes.ts este archivo no existe, es necesario crearse con el siguiente código:

import { Route, RouterModule } from '@angular/router';
import { LosAuthGuardV1Service } from 'ng-los-auth-v1';
import { environment } from 'src/environments/environment';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { ProtectedComponent } from './components/protected/protected.component';

const routes: Route[] = [
    {
        path: '',
        component: HomeComponent,
    },
    {
        path: 'about',
        component: AboutComponent,
    },
    {
        path: 'protected',
        component: ProtectedComponent,
        canActivate: [LosAuthGuardV1Service], // Proteger ruta con seguridad versión 1
        data: {
            losAuthPermissions: [ // Código de roles en seguridad versión 1
                '120', 
                '121'
            ],
            urls: environment.urls // Si se pone seguridad es necesario enviar urls del ambiente
        }
    },
    {
        path: '**',
        pathMatch: 'full',
        redirectTo: '' // Ruta default de la aplicación
    },
];

export const ROUTING_MODULE = RouterModule.forRoot(routes, { useHash: true });

src/app/app.module.ts este archivo principal tendrá que estar construido de la siguiente forma

import { HttpClientModule, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Apollo, ApolloBoostModule, InMemoryCache } from 'apollo-angular-boost';
import { HttpLink } from 'apollo-angular-link-http';
import { LosTemplateModule } from 'ng-los';
import { LosAuthV1Module, LosAuthInterceptorV1Service } from 'ng-los-auth-v1';
import { AppComponent } from './app.component';
import { ROUTING_MODULE } from './app.routes';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { ProtectedComponent } from './components/protected/protected.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    LoginComponent,
    ProtectedComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ROUTING_MODULE,
    ApolloBoostModule,
    LosAuthV1Module,
    LosTemplateModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LosAuthInterceptorV1Service,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    private apollo: Apollo,
    private httpLink: HttpLink
  ) {

    this.apollo.create({
      link: this.httpLink.create({
        uri: '<url>',
        headers: new HttpHeaders()
          .set('appId', '<appId>')
          .set('publicKey', '<publicKey>')
      }),
      cache: new InMemoryCache(),
      defaultOptions: {
        watchQuery: {
          fetchPolicy: 'network-only',
          errorPolicy: 'ignore',
        },
        query: {
          fetchPolicy: 'network-only',
          errorPolicy: 'all',
        }
      }
    }, 'public');
  }
}

src/app/app.component.ts el código quedará de la siguiente manera

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  enviroment = environment;

  constructor() { }

}

src/app/app.component.html la estrutura inicial de la plantilla quedará de la siguiente manera

<lib-los-header [env]="enviroment"></lib-los-header>
<lib-los-side-menu [env]="enviroment"></lib-los-side-menu>
<lib-los-footer [env]="enviroment"></lib-los-footer>

Plantilla de seguridad versión 2

npm

npm i --save @angular/[email protected] @angular/[email protected] apollo-angular-boost graphql linq lodash ng-los-auth-v1 ng-los-auth-v2 ng-los bootstrap jquery popper.js devextreme devextreme-angular

yarn

yarn add --save @angular/[email protected] @angular/[email protected] apollo-angular-boost graphql linq lodash ng-los-auth-v1 ng-los-auth-v2 ng-los bootstrap jquery popper.js devextreme devextreme-angular

Implementación

src/index.html es necesario agregar la fuente de estilos de iconos de material en el encabezado <head> del html.

<head>
  ...
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

src/styles.scss es necesario agregar las siguientes lineas

@import "~bootstrap/scss/bootstrap";
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.snackbar-success {
    background: green;
    text-decoration-color: white;
    font-weight: bold;
    text-align: center;
}

.snackbar-error {
    background: red;
    text-decoration-color: white;
    font-weight: bold;
    text-align: center;
}

.snackbar-warning {
    background: #ffae42;
    text-decoration-color: white;
    font-weight: bold;
    text-align: center;
}

src/enviroments/enviroment.ts y src/enviroments/enviroment.prod.ts archivo de configuración de ambientes de la aplicación, se tendrá que tener la siguiente estructura:

export const environment = {
  production: false, // Cambiar a true en prod
  version: 2, // Versión de sistema de seguridad que se utilizará

  urls: {
    base: 'http://localhost:4200/#/', // Preguntar por URLS
    login: 'http://localhost:4200/#/', // Preguntar por URLS
    resources: '', // Preguntar por URLS
    v1: {
      auth: '', // Preguntar por URLS
      public: '' // Preguntar por URLS
    },
    v2: {
      auth: '', // Preguntar por URLS
      public: '' // Preguntar por URLS
    }
  },

  application: {
    appId: '5bbe4d62ce012a040374c9fa', // Identificador de base de datos de la Aplicación
    name: 'Seguridad LOS (dev)', // Nombre de la aplicación
    audience: 'f38998acaf454c8cbb1e1b490ae3f871', // ClientId de la aplicación
    publicKey: '' // Lave pública de la aplicación
  },

  header: {
    buttonNavMenuVisible: true, // Activa o desactiva el botón de menú
    buttonThemeVisible: false, // Activa o desactiva el botón para cambiar de color de tema
  },

  sideMenu: {
    selectRoomVisible: true, // Activa o desactiva la selección de salas
    navSideMenuOpen: true, // Menú abierto o cerrado
    navAppsMenuOpen: false // Menú de aplicaciones abierto o cerrado
  },

  footer: {
    title: 'from LOS Team', // Titúlo en el pie de página
    icon: {
      name: 'favorite', // Icono de pie de página (Material Icon)
      visible: true // Activa o desactiva icono
    }
  }
};

Generar 3 componentes básicos (opcionales, afecta también el siguiente paso de generación de rutas).

ng g c components/home
ng g c components/about
ng g c components/protected

src/app/app.routes.ts este archivo no existe, es necesario crearse con el siguiente código:

import { Route, RouterModule } from '@angular/router';
import { LosAuthGuardV2Service } from 'ng-los-auth-v2';
import { environment } from 'src/environments/environment';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { ProtectedComponent } from './components/protected/protected.component';

const routes: Route[] = [
    {
        path: '',
        component: HomeComponent,
    },
    {
        path: 'about',
        component: AboutComponent,
    },
    {
        path: 'protected',
        component: ProtectedComponent,
        canActivate: [LosAuthGuardV2Service], // Proteger ruta con seguridad versión 2
        data: {
            losAuthPermissions: [
                '5ba575d2b7d3c87554abd6c2' // Identificador de base de datos del menú registrado en sistema
            ],
            urls: environment.urls // Si se pone seguridad es necesario enviar urls del ambiente
        }
    },
    {
        path: '**',
        pathMatch: 'full',
        redirectTo: '' // Ruta default de la aplicación
    },
];

export const ROUTING_MODULE = RouterModule.forRoot(routes, { useHash: true });

src/app/app.module.ts este archivo principal tendrá que estar construido de la siguiente forma

import { HttpClientModule, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Apollo, ApolloBoostModule, InMemoryCache } from  'apollo-angular-boost';
import { HttpLink } from  'apollo-angular-link-http';
import { LosTemplateModule } from 'ng-los';
import { LosAuthV1Module } from 'ng-los-auth-v1';
import { LosAuthV2Module, LosAuthInterceptorV2Service } from 'ng-los-auth-v2';
import { AppComponent } from './app.component';
import { ROUTING_MODULE } from './app.routes';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { ProtectedComponent } from './components/protected/protected.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    LoginComponent,
    ProtectedComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ROUTING_MODULE,
    ApolloBoostModule,
    LosAuthV1Module,
    LosAuthV2Module,
    LosTemplateModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LosAuthInterceptorV2Service,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    private apollo: Apollo,
    private httpLink: HttpLink
  ) {

    this.apollo.create({
      link: this.httpLink.create({
        uri: '<url>',
        headers: new HttpHeaders()
          .set('appId', '<appId>')
          .set('publicKey', '<publicKey>')
      }),
      cache: new InMemoryCache(),
      defaultOptions: {
        watchQuery: {
          fetchPolicy: 'network-only',
          errorPolicy: 'ignore',
        },
        query: {
          fetchPolicy: 'network-only',
          errorPolicy: 'all',
        }
      }
    }, 'public');
  }
}

src/app/app.component.ts el código quedará de la siguiente manera

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  enviroment = environment;

  constructor() { }

}

src/app/app.component.html la estrutura inicial de la plantilla quedará de la siguiente manera

<lib-los-header [env]="enviroment"></lib-los-header>
<lib-los-side-menu [env]="enviroment"></lib-los-side-menu>
<lib-los-footer [env]="enviroment"></lib-los-footer>

Errores con TypeScript

Si te genera la consola el siguiente error:

ERROR in node_modules/apollo-angular/types.d.ts(10,58): error TS2304: Cannot find name 'Exclude'.

En el archivo tsconfig.json agrega la siguiente linea:

  "lib": [
      "es2017",
      "esnext.asynciterable", // Esta línea
      "dom"
    ]

Tambien en consola con el siguiente comando:

npm install [email protected] --save-exact