时间戳

首页 > 解决方案 > 在应用程序创建完成之前触发 Vue 路由器代码？

vue.js - 在应用程序创建完成之前触发 Vue 路由器代码？

问题描述

每当我尝试通过深度链接加载/刷新我的应用程序时，路由器代码都会首先触发。并且因为尚未设置身份验证令牌而失败......我假设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),
})

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

标签： vue.jsvue-router

解决方案

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

但是如何解决你的问题？

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

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。

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

推荐阅读