Question

每当我尝试通过Deeplink加载/刷新我的应用程序时，都会首先触发路由器代码。失败，因为尚未设置认证令牌...我认为应用程序的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

我认为这种行为是故意的和正确的。在渲染某些东西之前，路由器决定要渲染什么。

但是如何解决您的问题？

首先，我有一个像这样的持久身份验证模块：

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。

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

Answer 2

您是否尝试过在路由器之前加载它？ AFAIK 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),
 })

在创建应用程序之前触发Vue路由器代码？

2 个答案: