Vue Router 代码在应用程序创建完成之前触发？

Question

每当我尝试通过深层链接加载/刷新我的应用程序时，路由器代码都会首先触发。并且因为尚未设置身份验证令牌而失败......我假设应用程序的 beforeCreate 应该是第一个要执行的东西。

浏览器控制台显示：

router beforeEnter

app beforeCreate

路由器代码：

...
const router = new VueRouter({
    routes: [{
      path: '/article/:articleId',
      name: 'article',
      component: Article,
      beforeEnter (to, from, next) {
        console.log('router beforeEnter')
        // Load stuff from backend with axios
      }
    }]
}

应用程序启动代码

...
Vue.use(VueRouter)

import router from './router'

new Vue({
  el: '#app',
  store: store,
  router: router,
  beforeCreate: function() {
    console.log('app beforeCreate')
    // get authentication token from localStorage and put in axios header
  },
  render: h => h(App),
})

我在这里错过了什么？如何确保首先执行应用程序创建代码？

Answer 1

你试过先于路由器加载吗？据我所知，Vue 对象同步加载所有内容。

 new Vue({
  el: '#app',
  store: store,
  beforeCreate: function() {
    console.log('app beforeCreate')
    // set authentication token in axios header
  },
  router: router,
  render: h => h(App),
 })

Answer 2

我认为该行为是有意且正确的。在渲染之前，路由器决定渲染什么。

但是如何解决你的问题呢？

首先我有一个像这样的持久授权模块：

export default {
  name: 'auth',
  namespaced: false,
  state: {
    token: undefined,
    payload: undefined
  },

  mutations: {
    clearAuth (state) {
      state.token = undefined
      state.payload = undefined
    },

    setToken (state, token) {
      let payload
      try {
        payload = JSON.parse(atob(token.split('.')[1]))
      } catch (e) {
        payload = undefined
        token = undefined
      }
      state.token = token
      state.payload = payload
    }
  },

  getters: {
    token: state => state.token,
    isAuthenticated: state => !!state.token,
    hasRenewToken: state => !!state.payload && state.payload.renewable
  }
}

然后我使用vuex-persistedstate来初始化vuex模块

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  modules: {
    auth,
    ... // other modules
  },
  plugins: [
    createPersistedState({
      paths: ['auth']
    })
  ]
})

现在，无论何时创建商店，所有授权信息都在商店中。

最后我使用了一个像这样的 axios 包装器 (request.js):

import axios from 'axios'
import store from '@/store'

const requestHandler = config => {
  config.headers = {
    'Authorization': store.getters.token
  }
  config.crossDomain = true
  config.method = 'POST'
  return config
}

const request = axios.create()
request.interceptors.request.use(requestHandler)

export default request

现在我不导入 axios，而是 request.js 我想在任何地方发出请求。

希望此方法对您有所帮助。至少对我有用

Vue Router 代码在应用程序创建完成之前触发？

Vue Router code firing before app creation finished?

vue.js

vue-router