Vue.js with VueRouter - how to correctly route on user's refresh

Question

I use Vue and VueRouter (and also Vuex but it is not the case here) in my project. Imagine i have 5 files:

main.js - stores all components definitions, imports them from external files and so on.
App.vue - it is main component that stores all other
routes.js - stores all the routing definitions
login.vue - stores login component (login page)
content.vue - stores page component

(quite simplified version but you surely get the idea).

Now if i open my path '/' it should reroute me to '/login' page if i am not logged in and to '/content' when i am logged in. Nothing special here. Now my page works as intended (almost). If I enter in my browser '/content' it tries to render '/content' component with default data (ie userId = -1), then immediately it reroutes me to '/login' page. The '/content' shows just for a second. And it is my problem. I would like to reroute to '/login' without earlier rendering '/content' with default data.

It is obvious that it tries to render '/content' - maybe from cache or something, but since rerouting is my first command in created() it should not mount /content component in app component, but /login.

Any idea how to prevent it? I am aware that i do not attach any code, but i hope it wont be necessery for you to understand the problem and advice any solution because it would need cutting and simpliding a lot of code.

store/retrive the userId from sessionstorage/localstorage. if you use vuex, npmjs.com/package/vuex-persistedstate — Jacob Goh
– Jacob Goh, Commented Aug 25, 2018 at 0:39

y4h2 · Accepted Answer · 2018-08-25 16:07:42Z

2

In your case, I think you should use vue router's beforeEach hook. You can use meta field in router to indicates whether the path need authentication, and do processing in beforeEach function.

I will give the sample code.

import Router from 'vue-router';

const router = new Router({
  routes: [{
    path: '/content',
    meta: {
      auth: true,
    }
  }, {
    path: '/login',
  }]
});


router.beforeEach(async (to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {

    // user your authentication function
    const isAuth = await getAuthentication;

    if (!isAuth) {
      next('/login');
    }

    next();
  }
})

if your authentication function is not async function, you should remove async/await keywords

answered Aug 25, 2018 at 16:07

y4h2

3,4332 gold badges28 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julien J · Accepted Answer · 2021-03-09 10:03:50Z

1

Except if the API in the meantime declares that you are no longer authenticated, the router will not be able to refresh itself by the beforeEach method.

Even with a loop method that retrieves data from the API, which will store them in the store as reactive data.

In Vue everything can be reactive, except Vue router

answered Mar 9, 2021 at 10:03

Julien J

877 bronze badges

Collectives™ on Stack Overflow

Vue.js with VueRouter - how to correctly route on user's refresh

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related