add: guard in router
This commit is contained in:
Alexandro Uc Santos
@@ -1,11 +1,305 @@
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import LoadingModal from '../components/ui/LoadingModal.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
$('#sidebar').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
auth.$patch({
|
||||
sesion: '',
|
||||
token: '',
|
||||
user: {},
|
||||
});
|
||||
localStorage.removeItem('session');
|
||||
router.push({name: 'login'});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<nav id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<!-- <img src="/images/logo.png" alt="Eta viaporte" width="120"> -->
|
||||
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
|
||||
</div>
|
||||
<h2 class="my-4">COVO</h2>
|
||||
<p><i class="fa-solid fa-user"></i> <span class="ms-2">{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<ul class="list-unstyled components">
|
||||
<li :class="[route.name === 'home' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-regular fa-building" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'home'}">Empresa</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'users'}">Usuarios</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'calendar'}">Calendario</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li :class="[route.name === 'loads' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-box" :class="[route.name === 'loads' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'loads'}">Cargas</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li :class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
</ul>
|
||||
<div class="eta-info">
|
||||
<div class="divider"></div>
|
||||
<a class="link-eta" href="">Aviso de privaciadad</a>
|
||||
<a class="link-eta" href="">Terminos y condiciones</a>
|
||||
<a class="link-eta" href="">FAQS</a>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
<a @click="handleLogout"
|
||||
active-class=""
|
||||
class="nav-link m-2">
|
||||
Cerrar sesión
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
<div id="content">
|
||||
<nav class="navbar navbar-expand-lg navbar-light custom-navbar">
|
||||
<div class="nav-items">
|
||||
<button type="button" id="sidebarCollapse" class="btn btn-info btn-menu">
|
||||
<i class="fas fa-align-left"></i>
|
||||
</button>
|
||||
<div class="nav-options">
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'recovery'}">Embarques</RouterLink>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'recovery'}">Cargas</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="view">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LoadingModal/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
background-color: #f6f3f3;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
/* margin: 20px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
min-height: 100vh;
|
||||
/* background: #FFF;
|
||||
color: #323030; */
|
||||
background: #323030;
|
||||
color: #FFF;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#sidebar.active {
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-header {
|
||||
padding: 20px;
|
||||
/* background: #FFF;
|
||||
color: #323030; */
|
||||
background: #323030;
|
||||
color: #FFF;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin-top: 16px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#sidebar ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 5px;
|
||||
/* background-color: #FFF; */
|
||||
background-color: #323030;
|
||||
}
|
||||
|
||||
#sidebar ul li div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#sidebar ul li i{
|
||||
font-size: 20px;
|
||||
color: #897c7c;
|
||||
}
|
||||
|
||||
#sidebar ul li.active > a, a[aria-expanded="true"] {
|
||||
color: #fff;
|
||||
background: #6d7fcc;
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
display: block;
|
||||
width: calc(100vw - 220px);
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.view {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.nav-options {
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
cursor: pointer;
|
||||
/* color: #5f5c5c; */
|
||||
color: #ebd6d6;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-link:hover{
|
||||
/* color: #413f3c; */
|
||||
color: #FFF;
|
||||
}
|
||||
.nav-link:focus{
|
||||
/* color: #413f3c; */
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.router-link-active{
|
||||
/* color: #413f3c !important; */
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.bg-nav-active {
|
||||
/* background-color: #e4eff2 !important;; */
|
||||
background-color: #373738 !important;;
|
||||
}
|
||||
|
||||
.eta-info {
|
||||
// position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
bottom: 10px;
|
||||
gap: 1rem;
|
||||
// background-color: red;
|
||||
align-items: start;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.link-eta {
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.custom-navbar {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.btn-menu {
|
||||
display: flex;
|
||||
}
|
||||
#sidebar {
|
||||
margin-left: -220px;
|
||||
|
||||
}
|
||||
#sidebar.active {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user