Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Dashboard page appears for a fraction of a second when not logged in


Hi,

Templates have a behavior of showing the dashboard page for a fraction of a second, even when the user is not logged in. When accessing the app made with the template, it shows the dashboard screen for a fraction of a second and then the user is redirected to the login page, causing a bad experience.

Is this behavior possible to change?

I don't want to show the inside of the system to a user who is not registered.

Thanks!
MB

PS. Using VUE in 8.1.5 Metronic version


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi Mateus,

Do you use the same redirect functionality as it is in the latest Metronic?

We redirect unauthenticated users to the sign-in page and dashboard page shouldn't appear.

Check router/index.ts.

if (to.meta.middleware == "auth") {
if (store.getters.isUserAuthenticated) {
next();
} else {
next({ name: "sign-in" });
}
} else {
next();
}


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Implement the code, but even so the behavior remains the same, ie it didn't work.

Any other idea?

BR,
MB



This code shouldn't allow the unauthenticated user to see the dashboard page.

Were you able to reproduce this issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/#/dashboard

As an alternative solution, you can use v-if directive in src/layouts/main-layout/MainLayout.vue.

Add new computed property:

const isUserAuthenticated = computed(() => {
return store.getters.isAuthenticated();
});


Then you can use it on the root element to hide the layout for unauthenticated users.

<div
v-if="isUserAuthenticated"
class="d-flex flex-column flex-root app-root"

>

</div>


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(