Vue

Introducción:
Creación de un proyecto administrativo el cual tiene diferentes componentes:
formulario de login redireccionamiento y componente principal

1.-Creación de un proyecto
2.-Agregar dependencias
3.-Creación de componentes
4.-Creación de rutas (Router)
5.-Creación de login (Vuex)
6.-Consumo de servicios

Características técnicas
Vue versión 3.9.0
Dependencia de diseño Vuetify versión 1.5.5
NodeJs version 12.6.0
Vuex version 3.0.1
Router
Sass
Eslint prettier
1.- Creación del proyecto
Para crear un proyecto en vue utilizamos la interfaz grafica o directamente desde
consola con la siguiente instrucción

Abriendo la interfaz grafica:

MacBook-Pro-de-shenick: shenick$ Vue UI

Nos abre la interfaz grafica y para acceder: http://localhost:8000/dashboard

Usando la consola:
MacBook-Pro-de-shenick: shenick$ Vue create “Nombre de tu proyecto”
>Manually
>Babel
>Router
>Vuex
>CSS

2.- Agregando Dependencias

Para agregar dependencias en vue utilizamos el siguiente comado:

MacBook-Pro-de-shenick: shenick$ npm install “nombre de la dependencia”

En este caso usaremos de ejemplo vuetify
MacBook-Pro-de-shenick: shenick$ npm install –save vuetify

Si ya temenos las dependencias instaladas de manera global podemos

simplemente agregarlas
MacBook-Pro-de-shenick: shenick$ vue add Vuetify

3.- Creación de componentes

Para agregar componentes en vue podemos hacerlo de manera manual creando un archivo
llamado “index.vue” este se puede comportar de diferentes formas puede ser un componente
o puede ser una vista, para hacerlo de manera mas automática usamos una dependencia que
nos crea una carpeta con sus elementos necesarios

MacBook-Pro-de-shenick: shenick$ npm install -g vue-generate-component

Para usar la dependencia utilizamos el siguiente comando

MacBook-Pro-de-shenick: shenick$ vgc “nombre de tu componente”

Para este proyecto crearemos mas de una componente pero el principal es Login, dashboard
y las vistas de no encontrado, acceso restringido

4.- Creación de rutas

Hay que tener en cuenta que para compartir datos a traves de rutas hay que habilitar props
en router y crear el props en la ruta que se van a recibir los datos se utiliza mounted
Dentro de la estructura de vue hay un archivo que se genera cuando nosotros lo creamos
por primera vez el cual se llama router.js, dentro de este podremos manipular todas nuestras
rutas.

routes: [
path: indica el nombre de nuestra ruta
redirect: indica hacia donde queremos mandar cuando ingresen esa ruta

*: nos indica que cualquier cosa que no se conozca nos redireccionara al componente 404 que es una
vista de alerta de no encontrado
/: nos indica la ruta principal por donde empiezan a cargar nuestros componentes
{ path: '*', redirect: '404' },
{
path: '/',
redirect: 'login'
},
{
path: '/404',
component: errorNotFound
},
{
path: '/403',
component: errorDeny
},
{
path: '/login',
name: 'admin-login',
props: true,
component: loginAdminComponent
}

Nosotros podemos agregar seguridad a nuestras rutas para que solo aquellos que tengan
permisos puedan acceder para ello agregamos lo siguiente a nuestras rutas:
 meta: {
requiresAuthAdmin: true
}

Como se ve en el siguiente ejemplo

Una ruta puede tener rutas hijos es decir a partir de esas se presenta un flujo como se muestra en
el siguiente ejemplo utilizamos children: [ ]

{
path: '/dashboard',
name: 'dashboard',
props: true,
component: dashboardComponent,
meta: {
requiresAuthAdmin: true
},
children: [
{
path: 'catalogs',
name: 'catalogs',
component: catalogsComponent,
props: true,
meta: {
requiresAuthAdmin: true
}
},
{
path: 'detail-catalog',
name: 'detail-catalog',
component: detailCatalogComponent,
props: true,
meta: {
requiresAuthAdmin: true
}
},
{
path: 'attributes',
name: 'attributes',
component: attributesComponent,
props: true,
meta: {
requiresAuthAdmin: true
}
},
{
path: 'register-carousel',
 name: 'register-carousel',
component: registerCarouselComponent,
meta: {
requiresAuthAdmin: true
}
},
{
path: 'edit-pages',
name: 'edit-page',
component: editPageComponent,
meta: {
requiresAuthAdmin: true
}
},
{
path: 'register-widget',
name: 'register-widget',
component: registerWidgetComponent,
meta: {
requiresAuthAdmin: true
}
}
]

Para accionar la proteccion de rutas utilizamos la siguiente funcion la cual nos

indica que si existe un usuario logeado nos dara permiso si no, nos redireccionara
al componente /403 el cual nos indica que no tenemos permisos.

router.beforeEach((to, from, next) => {

//variable tomada de vuex donde se encuentra el proceso de inicio de sesion
const isLogged = localStorage.getItem('is_logged')
//la ruta /login es la principal sin embargo una vez logeado siempre nos direccionara al componente principal
que es dashboard
if (to.path === '/login' && isLogged !== null) {
router.push('/dashboard')
}
//si no esta logeado no puede acceder a las rutas protegidas
if (to.matched.some(record => record.meta.requiresAuthAdmin)) {
if (isLogged === null) {
router.push('/403')
//si esta logeado puede continuar navegando
} else {
next()
}
} else {
next()
}
})

4.1.- Cargar nuestros componentes

Dentro del componente principal APP.VUE

Usamos la siguiente estructura

<template>
<v-app>
//router-view indica que ahí se cargara una vista la cual es / y esta nos redirecciona a login
<router-view></router-view>
</v-app>
</template>

Dentro de login tenemos el método que nos va a autentificar

Vista de login.html
<section class="login">
<v-layout row wrap>
<v-flex class="login-header" xs12>
<v-img class="img-login-header" :src="require('@/assets/img/jac-logo.png')" width=144 />
</v-flex>
<v-flex class="login-section">
<div class="login-form">
<h1 class="login-title">¡Bienvenido al Administrador de Jac Store Online!</h1>
<v-text-field class="user-input" label="Usuario" v-model="email"
@keyup.enter.native="login()"
append-icon="person" :messages="messageValidLogin"></v-text-field>
<v-text-field class="user-password" :type="showPassword ? 'text' : 'password'" v-model="password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'" label="Constraseña"
@keyup.enter.native="login()"
@click:append="showPassword = !showPassword"></v-text-field>
<v-btn class="btn-login" @click="login()" color="#e63e32">ENTRAR</v-btn>
<v-flex class="login-footer">
<label class="label-input-footer">¿Olvidaste tu contraseña? <span
@click="currentView = 'recover-password'">Recupérala</span></label>
</v-flex>
</div>
</v-flex>
</v-layout>
</section>

Vista login.js

//se importa el servicio de usuario

import customerService from '@/services/customerService'

export default {

name: 'login',

components: {},

props: [],

data () {

return {

showPassword: false,

password: '',

email: '',

messageValidLogin: ''

},

//carga una imagen que se encuentra en el proyecto

computed: {

logo () {

return require('@/assets/img/jac-logo-negro.png')

},

created () {

},

methods: {

//funcion que inicia sesion

login: function () {

//envio de datos

const data = {

'email': this.email,

'password': this.password

customerService.loginPassword(data).then((res) => {

//si tiene la propiedas accessToken

if (res.hasOwnProperty('accessToken')) {

//mandamos a llamar el metodo en vuex setToken y le seteamos el token

this.$store.commit('setToken', { token: res.accessToken, type: 'email' })

//redireccionamos a dashboard ruta protegida que ya esta autenticada

this.$router.push('/dashboard')

} else {

this.messageValidLogin = 'Credenciales incorrectas'

this.valid = false

})

}
Servicio CostumerService
const apiLoginPassword = configService.apiUrl + `usermanagement/auth/login`
const apiGetUser = configService.apiUrl + `usermanagement/user/me`
const apiGetUserInfo = configService.apiUrl + `customer/customerdata/`

const customerService = {
loginPassword (data) {
return (fetch(apiLoginPassword, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then((res) => res.json())
.then((json) => json))
}
getUser () {
return (fetch(apiGetUser, {
method: 'GET',
withCredentials: true,
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
//le mandamos el token
'Authorization': 'Bearer ' + localStorage.getItem('access_token')
})
})
.then((res) => res.json())
.then((json) => json))
},
//recibe el ID del usuario
getUserInfo (id) {
return (fetch(apiGetUserInfo + id, {
method: 'GET',
withCredentials: true,
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
//le mandamos el token
'Authorization': 'Bearer ' + localStorage.getItem('access_token')
})
})
.then((res) => res.json())
.then((json) => json))
},

postLogout () {
return (fetch(apiGetLogout, {
 method: 'POST',
withCredentials: true,
credentials: 'include',
headers: new Headers({
'Content-Type': 'application/json',
//le enviamos el token
'Authorization': 'Bearer ' + localStorage.getItem('access_token')
})
})
.then((json) => json))
}

export default customerService

Vuex

import customerService from './services/customerService'

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {
user: '',
isLogin: false
},
mutations: {
setUser (state, user) {
state.user = user
//guardamos en la variable el usuario
localStorage.setItem('user', JSON.stringify(user))
},
setToken (state, token) {
state.token = token.token
//obtenemos el token
localStorage.setItem('access_token', JSON.stringify(token.token).split('"').join(''))
customerService.getUser().then((res) => {
if (res.status === 200 || res.status === true) {
if (res.id) {
//si obtenemos una respuesta esta logeado
localStorage.setItem('is_logged', true)
state.isLogin = true
} else {
localStorage.removeItem('is_logged')
 state.isLogin = false
}
//obtenemos la info del usuario mandandole el id del usuario
customerService.getUserInfo(res.id).then((resInfo) => {
if (resInfo) {
//si obtenemos una respuesta el id sera igual al usuario
resInfo.id = res.id
//state user guardara toda esta informacion
state.user = resInfo
}
//la almacenamos
localStorage.setItem('user', JSON.stringify(resInfo))
})
//si no se pierden los datos
} else {
state.token = ''
state.user = ''
state.isLogin = false
localStorage.removeItem('user')
localStorage.removeItem('is_logged')
localStorage.removeItem('access_token')
// localStorage.removeItem('operator')
customerService.postLogout().then((res) => {
})
}
})
},
//metodo para cerrar sesion removemos la sesion
setLogout (state) {
customerService.postLogout().then((res) => {
})
state.token = ''
state.user = ''
state.isLogin = false
localStorage.removeItem('user')
localStorage.removeItem('is_logged')
localStorage.removeItem('access_token')
// localStorage.removeItem('operator')
}
},
actions: {

},

//los utilizamos para compartir datos entre compenentes

getters: {
getUser: (state) => {
 return state.user
},
getIsLogin: (state) => {
return state.isLogin
}
}
})