vue-router beforeEach 函数没有 return 项被更新

Question

我遇到了一个问题。所以这是场景。我提出了一个 axios 请求，该请求从存储的 cookie 中获取访问令牌。然后我提交了一个突变来制作 true isLoggedIn 变量。然后我从 Navbar 访问这个变量来更改菜单项。有用。但是当我尝试在 beforeEach 函数中使用 getter 访问 isLoggedIn 变量时，它仍然是错误的。但在 Navbar 上确实如此。

user/actions.js 我请求后端进行身份验证。

import axios from 'axios'

const checkUser = ({ commit }) => {
  axios({
    method: 'get',
    url: 'http://localhost:3000/api/auth/VpW02cG0W2vGeGXs8DdLIq3dQ62qMd0',
    withCredentials: true,
    headers: {
      Accept: "application/json",
    },
  })
    .then((res) => {
      commit('defineUser', res.data)
      return true
    })
    .catch((err) => {
      console.log(err)
      return false
    })
}

export default {
  checkUser,
}

user/mutations.js 我设置了用户和 isLoggedIn 变量

const defineUser = (state, res) => {
  state.user = res.user
  state.isLoggedIn = true
}

export default {
  defineUser,
}

然后我在路由器的 beforeEach 中调用那个动作 func

router.beforeEach(async (to, from, next) => {
  const accessToken = VueCookies.get('access_token')
  if (accessToken) { // first I check if there is an access token. I do that because I check every request if it is logged in. So I can manage Navbar.
    await store.dispatch('user/checkUser')
    if (store.getters['user/isLoggedIn']) { // HERE IS THE PROBLEM IT TURNS FALSE HERE. if there is an access token, then I check it with if mutation made isLoggedIn true and all doors are open for that user
      next()
    } else { // if it is false then show a toast and remove access token and reload the page
      router.app.$bvToast.toast('You need to log in to see this page!', { // another question, when I deleted async it cannot read toast with only getter. If I put something else it works perfectly.
        title: 'Unathorized',
        variant: 'danger',
        solid: true
      })
      VueCookies.remove('access_token')
      router.go(router.currentRoute)
    }
  } else if (to.meta.requiresAuth) { // so if there is no access token and this page requires auth so show an toast
    router.app.$bvToast.toast('You need to log in to see this page!', {
      title: 'Unathorized',
      variant: 'danger',
      solid: true
    })
  } else { // if no requires auth and no access token then just get in the page
    next()
  }
})

如果您需要任何其他信息，请说，以便我与您分享。任何帮助将不胜感激。

Answer 1

您正在 awaitcheckUser，但这不是 return 承诺。将其更改为：

const checkUser = ({ commit }) => {
  return axios({    // notice the `return` statement
  ...
}

或者，您可以使用 async/await:

const checkUser = async ({ commit }) => {   // async
  await axios({    // await
  ...
}

vue-router beforeEach 函数没有 return 项被更新

vue-router beforeEach function does not return item which is updated

javascript

authentication

vue.js

vue-router

vuex