Запуск кода Vue Router до завершения создания приложения? - PullRequest
Новая
       10

Запуск кода Vue Router до завершения создания приложения?

0 голосов
/ 16 октября 2018

Всякий раз, когда я пытаюсь загрузить / обновить свое приложение по ссылке, сначала запускается код маршрутизатора.И происходит сбой, потому что токен аутентификации еще не установлен ... Я предполагаю, что 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),
})

Что мне здесь не хватает?Как я могу убедиться, что код создания приложения выполняется первым?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Я думаю, что поведение предназначено и правильно.Прежде чем что-то получить, маршрутизатор решает, что делать.

Но как решить вашу проблему?

Сначала у меня есть постоянный модуль аутентификации, подобный этому: 

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, где бы я ни хотел сделать запрос.

Надеюсь, этот подход поможет вам.По крайней мере, у меня это работает

0 голосов
/ 16 октября 2018

Вы пытались загрузить его до роутера?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),
 })
...