ng-los

v6.3.0

Published

2 years ago

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

Downloads

0High
0Medium
0Low

moises.aleman

ng-los

Plantilla desarrollada con Angular CLI version 6.0.8.

Introducción

Plantilla con seguridad versión 1
Plantilla con seguridad versión 2 (recomendada)
Errores con TypeScript

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ng-los

Introducción

Requisitos

Plantilla de seguridad versión 1

Instalación

Implementación

Plantilla de seguridad versión 2

Implementación

Errores con TypeScript