基于值重定向的 Vue 路由器和 vuex 问题

Question

I have a Vue application that I am trying to have it that when the user has not paid and trial is over they are redirected to /billing and displayed an error message. I also would like it so that if they have paid or are still in their trial period that they can use the application.

storeUser code in my store.js

storeUser(state, user) {
      state.user = user
      state.isPaid = user.isPaid
      state.isTrial = user.isTrial
 },

data passed into storeUser as 'user'

{
  name: "Joe",
  isPaid: false,
  isTrial: false
}

Data showing in my vuex store using the chrome vui extention

{
  name: "Joe",
  isPaid: null,
  isTrial: null
}

Not sure why the data is being input wrong since I can console.log the correct data in the storeUser function. However if I look into the user portion I can see it as the correct false values. When I try to specify this in the code below for the vue router it says that is can't read it because it's null. I assume this is just an async issue.

state in store.js

state: {
    token: null,
    isPaid: null, 
    isTrial: null,
    error: {
      registerErrorMessage: '',
      loginErrorMessage: '',
      resetError: ''
    },
    user: null
  }

main.js which contains my vue router

} else if(to.path != '/billing' && !(store.state.isPaid && store.state.isTrial)) {
    next({
      path: '/billings',
      query: {
         paid: false,
      }
  })

Can anyone spot a potential issue or maybe a solution to my issue? This code should be enough to reproduce the issue though if missing I can provide more, there is no public repo to show the rest of the code in.

EDIT** So something weird happened.. I am now seeing more correct data than before (isPaid and isTrial are valid) however I'm still not able to go to other routes now. Adding output of store.state at the beginning of my beforeEach

{
  token: 'random string',
  isPaid: true,
  isTrial: false,
  error: {},
  user: {
    name: "Joe",
    isPaid: true,
    isTrial: false
  }
}

EDIT 2**

storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

EDIT 3** Here is my whole vue route from main.js

router.beforeEach((to, from, next) => {
  store.dispatch('tryAutoLogin')
  console.log(store.state) // this is test only not for prod
  if(!store.state.token && (to.path == '/login' 
    || to.path == '/signup' 
    || to.path == '/forgot' 
    || to.path == '/resend' 
    || to.path.includes('/confirmation/'))) 
  {
    return next()
  } else if (to.path == '/signup') {
    return next({ query: {plan: from.query.plan }})
  } else if(to.path != '/billing' && !(store.state.isPaid && store.state.isTrial)) {
    next({
      path: '/billing',
      query: {
         paid: false,
      }
  })
  } else if(store.state.token) {
    return next()
  } else {
    return next('/login')
  }
})

You can see I do the auto login which just checks if a token exists or not that's it. It's not related to the issue.

EDIT 4**

I have an idea but not sure how to implement it.. Use promises to make sure the data is right. My confusion on the promise part is getting them to work together. So I'm think authUser mutation then somehow make the storeUser action a promise that I can resolve in my beforeEach

Actions

tryAutoLogin({commit, dispatch}) {
   const token = localStorage.getItem('token')
   if(!token) {return}
   commit('authUser',{
     token
   })
   dispatch('storeUser')
},


storeUser({commit, state}) {
      if(!state.token) return
      axios.get('/user/userInfo')
        .then(res => {
          if(res.data.success) {
            commit('storeUser', {
              name: res.data.user.name,
              companyName: res.data.user.company.companyName,
              role: res.data.user.role,
              isPaid: res.data.user.company.stripe.isPaid,
              isTrial: res.data.user.company.stripe.isTrial
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

Mutations

authUser(state, userData) {
  state.token = userData.token
},
storeUser(state, user) {
  state.user = user
  state.isPaid = user.isPaid
  state.isTrial = user.isTrial
},

Answer 1

Looks like you have a lot of duplicate and confusing code.

Why is there 2 of isPaid and isTrial in the state?

You also did not use the name property you provided to commit function.

The commit

commit('storeUser', {
    name: res.data.user.name,
    isPaid: res.data.user.company.stripe.isPaid,
    isTrial: res.data.user.company.stripe.isTrial
});

const store = new Vuex.Store({
    state: {
        userName: '',
        isPaid: false,
        isTrial: false,
    },
    mutations: {
        storeUser(state, data) {
            state.userName = data.name;
            state.isPaid = data.isPaid;
            state.isTrial = data.isTrial;
        },
    },
});

Now you access the state store.state.isPaid and store.state.isTrial .

You can see a working example at this jsfiddle . If you open up the console you can see how the current state is logged.