Guards agregados

src/components/Header.vue

@@ -30,8 +30,9 @@
             <div class="container d-flex justify-content-between py-1">
                 
                 <div class="d-flex">
-                    <span class="text-white mr-3 my-auto mr-md-4">Nombre de Usuario</span>
-                    <div>
+                    <span class="text-white mr-3 my-auto mr-md-4" v-text="setCurrentUser()">
+                    </span>
+                    <div v-if="isAdmin() == true"> 
                         <!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
                         <b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
                             <b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
@@ -58,17 +59,22 @@
 
 export default {
     data() {
-        return {}
+        return {
+            user: null
+        }
     },
     methods: {
-        logout: function() {
-            localStorage.removeItem('token')
-            localStorage.removeItem('idAdmin')
-            localStorage.removeItem('isAdmin')
-            
-            this.$router.push('/login')
+        setCurrentUser(){
+            return window.localStorage.user;
         },
-    },
+        logout: function() {
+            localStorage.clear();
+            this.$router.replace('/login')
+        },
+        isAdmin: function()  {
+            return JSON.parse(localStorage.getItem('isAdmin'));
+        }
+    }
 }
 
 </script>

src/routes.js

@@ -7,6 +7,10 @@ import AddEquip from './views/AddEquip.vue'
 import UpdateEquip from './views/UpdateEquip.vue'
 
 const routes = [{
+        path: '*',
+        redirect: 'login'
+    },
+    {
         path: '/',
         component: Login,
         name: 'start'
@@ -15,25 +19,47 @@ const routes = [{
         path: '/login',
         component: Login,
         name: 'login',
-        meta: {isPublic: true}  
+        meta: { isPublic: true },
     },
     {
         path: '/user',
         component: User,
         name: 'user',
-        meta: {isPublic:true}
+        meta: { isPublic: true },
+        beforeEnter: (to, from, next) => {
+            if (isAuthenticated())
+                next(true);
+            else
+                next('/login');
+        }
     },
     {
         path: '/addEquip',
         component: AddEquip,
         name: 'addEquip',
-        meta: {perm:true}
+        meta: { perm: true },
+        beforeEnter: (to, from, next) => {
+            if (!isAuthenticated())
+                next('/login');
+            else if (isAuthenticated() && !isAdmin())
+                next(false)
+            else
+                next(true);
+        }
     },
     {
         path: '/updateEquip',
         component: UpdateEquip,
         name: 'updateEquip',
-        meta: {perm:true}
+        meta: { perm: true },
+        beforeEnter: (to, from, next) => {
+            if (!isAuthenticated())
+                next('/login');
+            else if (isAuthenticated() && !isAdmin())
+                next(false)
+            else
+                next(true);
+        }
     },
 ]
 
@@ -44,29 +70,30 @@ Vue.use(VueRouter)
 const router = new VueRouter({ routes })
 
 const isAuthenticated = function() {
-    return window.localStorage.token ? true : false
+    return !!window.localStorage.token
 }
 
 const isAdmin = function() {
-    return window.localStorage.isAdmin
+    return JSON.parse(window.localStorage.isAdmin)
 }
 
 //const isAdmon = window.localStorage.getItem('rol') ? true : false
 
-router.beforeEach((to, from, next) => {
-    
+/*router.beforeEach((to, from, next) => {
+
     if (to.path !== '/login' && !isAuthenticated()) {
         // eslint-disable-next-line no-console
         //console.log("Entrando");
-        return next({name: 'login'})
+        return next({ name: 'login' })
     }
 
     // eslint-disable-next-line no-console
-     if (isAuthenticated() && isAdmin() === false && to.path !== '/user') {
-         return next({name: 'user'})        
-     }
+
+    if (isAuthenticated() && isAdmin() === false && to.path !== '/user') {
+        return next({ name: 'user' })
+    }
 
     return next()
-})
+})*/
 
-export default router
+export default router;

src/views/Login.vue

@@ -11,7 +11,7 @@
                 </span>
             </div>
             <input
-                type="text"
+                type="email"
                 v-model="name"
                 class="form-control input-login-form shadow-none py-4"
                 placeholder="Usuario"
@@ -28,6 +28,7 @@
             
             <input
                 type="password"
+                v-on:keyup.enter="onLogin()"
                 v-model="password"
                 class="form-control input-login-form shadow-none py-4"
                 placeholder="Contraseña"
@@ -52,6 +53,16 @@
         >
             Usuario o contraseña invalidos
         </div>
+        
+        <!-- <div
+            class="alert alert-danger mt-4 mx-auto text-center"
+            style="display: none; width:80%"
+            id="alertErr"
+            role="alert"
+            v-if=""
+        >
+            Formato de correo erróneo.
+        </div> -->
     </div>
 </template>
 
@@ -94,11 +105,13 @@ import axios from "axios";
                         
                             localStorage.setItem('isAdmin', res.data.user.isAdmin)
                             localStorage.setItem('token', res.data.token)
+                            localStorage.setItem('user', res.data.user.name)
                             localStorage.setItem(
                                 'idAdmin',
                                 res.data.user.idAdmin
                             )
-                            this.$router.push('/user')
+                            console.log(res.data.user.name);
+                            this.$router.replace('/user')
                         
                     }
                 })