Page display and refresh problem in vueJs - vue.js

Question

I have a small problem with the display of the Authentication with VueJs page.
Once on the authentication User page I also have the menu which remains displayed, and once authenticated it redirects me to the Home page however when I disconnect I have the same concerns, it redirects me to the authenticationUser page but with the menu that remains displayed.
and if I do a refresh on the authenticationUser page the page remains blank without error.
I don't know if you have any idea for the cause of the problem.
Thanks in advance.
Page App.vu
<template>
<v-app id='inspire'>
<div v-if="user && user.sub">
<Menu />
</div>
</v-app>
</template>
<script>
import AuthentificationUser from "./views/AuthentificationUser";
import AuthenticatedUserUtils from "./utils/AuthenticatedUserUtils";
import Header from './components/common/Header';
import Menu from './components/common/Menu';
export default {
name: "app",
data: () => ({
user: AuthenticatedUserUtils.user
}),
components: {
AuthentificationUser,
Menu
},
};
</script>
enter code here
Router.ts
import User from '../models/User'
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import AuthenticatedUserUtils from '../utils/AuthenticatedUserUtils'
Vue.use(VueRouter)
const routes: Array<RouteConfig> = [
{
path: '/',
meta: {
requireAuth: true,
}
},
{
path: '/inventory',
name: 'Inventory',
meta: {
requireAuth: true,
}
},
{
path: '/inventory/authentificationUser',
name: 'AuthentificationUser',
component: () => import('../views/AuthentificationUser.vue')
},
{
path: '/inventory/home',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: {
requireAuth: true,
}
},
{
path: '/inventory/parametrage',
name: 'Parametrage',
component: () => import('../views/Parametrage.vue'),
meta: {
requireAuth: true,
}
},
{
path: '/inventory/rfid',
name: 'RFID',
component: () => import('../views/RFID.vue'),
meta: {
requireAuth: true,
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if (!!to && !!to.meta && to.meta.requireAuth) {
// TODO : voir si le cookie existe et est valide
if (document && document.cookie) {
const potentialCookie = document.cookie
.split('; ')
.find(row => row.startsWith('access_token='));
let token = '';
if (potentialCookie) {
token = potentialCookie.split('=')[1];
}
const parsedJwt = parseJwt(token);
if (new Date() <= new Date(parsedJwt.exp * 1000)) {
const usr:User = new User();
usr.created = parsedJwt.created;
usr.sub =JSON.parse(JSON.stringify(parsedJwt.sub));
usr.exp = parsedJwt.exp;
AuthenticatedUserUtils.user = usr;
next();
} else {
AuthenticatedUserUtils.user = undefined;
// token non valide sur une page qui a besoin de l'authent
router.push('/inventory/authentificationUser').catch(()=>{});;
}
} else {
router.push('/inventory/authentificationUser').catch(()=>{});;
}
} else {
// appInsights.trackPageView({ name: to.name });
next();
}
});
function parseJwt (token: string) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
export default router
enter code here
Menu.ts
<template>
<v-app>
<v-navigation-drawer color="#80e27e" app v-model='drawer'>
<div style="background-color: #F5F5F5; width:260px;height:63px;">
<v-list-item-title class="text-h6" style="text-align:center; padding-top: 5%; color: #087f23;">{{ $t("label.inventaire") }}</v-list-item-title>
</div>
<v-list dense nav>
<template v-for='item in items'>
<v-list-item :key='item.text' #click="goToRoute(item.to)">
<v-list-item-icon>
<v-icon v-text="item.icon" style="color: #087f23;" />
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.title" style="color: #087f23;"/>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
<template>
<div style="color: #087f23; margin-top: 150%;">
<b><span block style="color: #087f23; margin-left: 23%; ">{{ $t("label.bienvenue") }} Frédéric</span></b>
<div style="width:150px;height:35px;border:0px solid #000;border-radius:5px;-webkit-border-radius:5px;margin-left: 20%;background-color: #F5F5F5;">
<img v-if="checkValueCodeLangueMenu() === true" style="width:35px; height:35px; margin-left:39%; border-radius:5px;-webkit-border-radius:5px;" src="#/assets/fra.png"/>
<img v-if="checkValueCodeLangueMenu() === false" style="width:27px; height:27px; margin-left:39%; margin-top:2%; border-radius:5px;-webkit-border-radius:5px;" src="#/assets/eng.png"/>
</div>
<v-btn style="color: #087f23; margin-top: 10%;width:200px;height:35px; margin-left: 10%;" #click="logout()">
<v-icon>mdi-logout</v-icon>
<label>{{ $t("label.deconnexion") }}</label>
</v-btn>
</div>
</template>
</v-navigation-drawer>
<v-app-bar app color="#4caf50">
<v-app-bar-nav-icon #click="drawer = !drawer" style="color: #087f23;"></v-app-bar-nav-icon>
<v-spacer></v-spacer>`
<v-menu offset-y>`enter code here`
<template v-slot:activator="{ on }">
<div class="text-center">
<v-btn icon v-on="on">
<v-icon> mdi-earth </v-icon>
</v-btn>
</div>
</template>
<v-list>
<v-list-item
v-for="langue in languesDispo"
:key="langue.codeLangue"
#click="changeLocale(langue)"
>
<v-list-item-title>
<img v-if="checkValueCodeLangue(langue.codeLangue) === true" style="width:26px; height:26px;border-radius:5px;-webkit-border-radius:8px;vertical-align:middle" src="#/assets/fra.png"/>
<img v-if="checkValueCodeLangue(langue.codeLangue) === false" style="width:26px; height:26px;border-radius:5px;-webkit-border-radius:8px;vertical-align:middle" src="#/assets/eng.png"/>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-icon v-on:click="logout()">mdi-logout</v-icon>
</v-app-bar>
<v-main >
<v-container fluid>
<router-view/>
</v-container>
</v-main>
</v-app>
</template>
<script lang="ts">
import Vue from 'vue'
import i18n from '#/plugins/i18n';
import Langue from '#/models/Langue';
import PaysUtils from '#/utils/PaysUtils';
export default Vue.extend({
name: 'Menu',
data: () => ({
currentPays: 'fr',
languesDispo: PaysUtils.lstPays,
drawer: null,
imgLangue: null,
items: [
{ title: 'Accueil', icon: 'mdi-home', to: '/' },
{ title: 'Paramétrage', icon: 'mdi-cog', to: '/inventory/parametrage' },
{ title: 'RFID', icon: 'mdi-help-box', to: '/inventory/rfid' },
],
}),
methods: {
logout (){
document.cookie = "";
this.$router.push('/inventory/authentificationUser').catch(()=>{});
},
goToRoute(route: string): void {
this.$router.push(route);
},
changeLocale(langue: Langue): void {
if (langue.codeLangue && langue.codePays) {
this.$vuetify.lang.current = langue.codeLangue;
i18n.locale = langue.codeLangue;
this.currentPays = langue.codePays;
}
},
checkValueCodeLangue : function(langue: String) {
if(langue === 'fra') {
return true
}
return false
},
checkValueCodeLangueMenu : function() {
if(this.currentPays === 'fr'){
return true
}
return false
}
},
})
</script>