conectando archivos

src/components/Header.vue

@@ -40,7 +40,12 @@
                     </div>
                 </div>
                 <div class="my-auto">
-                    <router-link to="./login" class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial">Cerrar sesión</router-link>
+                    <span
+                        class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial:none; cursor: pointer;"
+                        v-on:click="logout()"
+                    >
+                        Cerrar sesión
+                    </span>
                 </div>
             </div>
 
@@ -56,7 +61,13 @@ export default {
         return {}
     },
     methods: {
-        
+        logout: function() {
+            localStorage.removeItem('token')
+            localStorage.removeItem('idAdmin')
+            localStorage.removeItem('isAdmin')
+            
+            this.$router.push('/login')
+        },
     },
 }
 

src/config/config.js

@@ -1,6 +1,6 @@
-//const config = {
+const config = {
     //api: 'https://venus.acatlan.unam.mx/censo-pruebas/',
-    //api: 'http://localhost:3000',
-//}
+    api: 'http://localhost:3000',
+}
 
-//module.exports = config
+module.exports = config

src/routes.js

@@ -14,22 +14,26 @@ const routes = [{
     {
         path: '/login',
         component: Login,
-        name: 'login'
+        name: 'login',
+        meta: {isPublic: true}  
     },
     {
         path: '/user',
         component: User,
-        name: 'user'
+        name: 'user',
+        meta: {isPublic:true}
     },
     {
         path: '/addEquip',
         component: AddEquip,
-        name: 'addEquip'
+        name: 'addEquip',
+        meta: {perm:true}
     },
     {
         path: '/updateEquip',
         component: UpdateEquip,
-        name: 'updateEquip'
+        name: 'updateEquip',
+        meta: {perm:true}
     },
 ]
 
@@ -39,4 +43,30 @@ Vue.use(VueRouter)
     /* Pruebas */
 const router = new VueRouter({ routes })
 
+const isAuthenticated = function() {
+    return window.localStorage.token ? true : false
+}
+
+const isAdmin = function() {
+    return window.localStorage.isAdmin
+}
+
+//const isAdmon = window.localStorage.getItem('rol') ? true : false
+
+router.beforeEach((to, from, next) => {
+    
+    if (to.path !== '/login' && !isAuthenticated()) {
+        // eslint-disable-next-line no-console
+        //console.log("Entrando");
+        return next({name: 'login'})
+    }
+
+    // eslint-disable-next-line no-console
+     if (isAuthenticated() && isAdmin() === false && to.path !== '/user') {
+         return next({name: 'user'})        
+     }
+
+    return next()
+})
+
 export default router

src/views/Login.vue

@@ -12,6 +12,7 @@
             </div>
             <input
                 type="text"
+                v-model="name"
                 class="form-control input-login-form shadow-none py-4"
                 placeholder="Usuario"
             />
@@ -27,6 +28,7 @@
             
             <input
                 type="password"
+                v-model="password"
                 class="form-control input-login-form shadow-none py-4"
                 placeholder="Contraseña"
             />
@@ -34,7 +36,10 @@
         </div>
 
         <div class="d-flex justify-content-center">
-            <button class="btn btn-success btn-login mt-4">
+            <button
+                v-on:click="onLogin()"
+                class="btn btn-success btn-login mt-4"
+            >
                 Iniciar Sesión
             </button>
         </div>
@@ -51,31 +56,63 @@
 </template>
 
 <script>
-// import config from "../config/config";
-// import axios from "axios";
+import config from "../config/config";
+import axios from "axios";
+
+ export default {
+   data() {
+     return {
+        name: '',
+        password: '',
+     };
+   },
+   methods: {
+     pruebaAxios() {
+       axios
+         .post(`${config.api}/login`)
+         .then((res) => {
+           /* eslint-disable no-console */
+           console.log(res.data);
+         })
+         .catch(err => {
+           /* eslint-disable no-console */
+           console.log(err.data);
+         });
+     },
+     onLogin() {
+            /* eslint-disable no-console */
+
+            const data = {
+                name: this.name,
+                password: this.password,
+            }
+
+            axios
+                .post(`${config.api}/login`, data)
+                .then(res => {
+                    if (res.status == 200) {
+                        
+                            localStorage.setItem('isAdmin', res.data.user.isAdmin)
+                            localStorage.setItem('token', res.data.token)
+                            localStorage.setItem(
+                                'idAdmin',
+                                res.data.user.idAdmin
+                            )
+                            this.$router.push('/user')
+                        
+                    }
+                })
+                .catch(function(err) {
+                    var alertErr = document.getElementById('alertErr')
+                    alertErr.style.display = 'block'
+                    console.log('Usuario o contraseña incorrectos.')
+                    console.log(err)
+                })
+        },
+   },
+ };
+
 
-// export default {
-//   data() {
-//     return {};
-//   },
-//   methods: {
-//     pruebaAxios() {
-//       axios
-//         .post(`${config.api}/login`)
-//         .then((res) => {
-//           /* eslint-disable no-console */
-//           console.log(res.data);
-//         })
-//         .catch(err => {
-//           /* eslint-disable no-console */
-//           console.log(err.data);
-//         });
-//     }
-//   },
-//   created() {
-//     this.pruebaAxios();
-//   }
-// };
 </script>
 
 <style scoped>

src/views/User.vue

@@ -28,7 +28,7 @@
                 <table class="table table-sm table-hover text-center" style="font-size:14px">
                     <thead class="thead-light text-uppercase">
                         <tr>
-                            <th v-for="tableHead in tableHeads" class="sticky-top">{{ tableHead }}</th>
+                            <th v-for="pcHead in pcHeads" class="sticky-top">{{ pcHead }}</th>
                         </tr>
                     </thead>
                     <tbody class="overflow-auto t-hov"  v-for="item in inventory">