I am currently working on rendering different components in the navbar based on the email/account that is signed in. There is a function called "getUser()" which retrieves the user's email. The items in the navbar include: Home, Procurement Site, Monitoring, Admin, and Log out. I want to show the "Admin" section only if the user's email matches [email protected]. Initially, I tried to check if the function successfully returns the email address and used a conditional template as shown below:
<template v-if="this.email == '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c0c5ccc8cfe1c6ccc0c8cd8fc2cecc">[email protected]</a>'">
<li class="nav-item">
<router-link to= "/Admin"> Admin </router-link>
</li>
</template>
Although this code successfully hides the admin section when not logged in with the specified email, it fails to display the section even when logging in with the [email protected] account. Any assistance would be greatly appreciated. Thank you.
Below is the full code for the navbar:
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to= "/Procurement"> Home </router-link>
</li>
<li class="nav-item">
<router-link to= "/ProcurementSite"> Procurement Sites </router-link>
</li>
<li class="nav-item">
<router-link to= "/Monitoring"> Monitoring </router-link>
</li>
<template v-if="this.email == '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f392979e9a9db3949e929a9fdd909c9e">[email protected]</a>'">
<li class="nav-item">
<router-link to= "/Admin"> Admin </router-link>
</li>
</template>
<li class="nav-item">
<router-link to="/" v-on:click="logOut()"> Log Out </router-link>
</li>
</ul>
</div>
<script>
import $backend from './../backend'
export default {
name: 'nav',
data () {
return {
email: ''
}
},
methods: {
getUser () {
console.log("in get user in monitor vue")
$backend.getUser()
.then(responseData => {
this.email = responseData.result
console.log(this.email)
}).catch(error => {
this.error = error.message
})
}
}
}
</script>