在应用程序启动之前使用 Vue-Router AJAX 调用 Vue.js答案

【问题标题】：Vue.js with Vue-Router AJAX call before application starts在应用程序启动之前使用 Vue-Router AJAX 调用 Vue.js
【发布时间】：2017-09-28 21:29:49
【问题描述】：

我正在创建一个简单的应用程序，允许登录、恢复密码和为登录用户执行一些其他操作。

我也在使用 Vue-Router。我想创建 3 种不同类型的路线：

只允许登录用户（例如：更改密码）
仅允许未登录的用户使用（例如：恢复密码）
允许所有人使用（例如：主页）

我有两个函数在所有路由之前调用

router.beforeEach(Authentication.OnlyLoggedAllowed)
router.beforeEach(Authentication.OnlyNotLoggedAllowed)

如果可能的话，我还想登录用户（AJAX 调用 API）。为了使用它，我尝试添加代码 BEFORE route.beforeEach(...)

import Vue from "vue"
import VueRouter from "vue-router"
import VueResource from "vue-resource"

...

Authentication.TryLogin.bind(Vue)();

...

router.beforeEach(Authentication.OnlyLoggedAllowed)
router.beforeEach(Authentication.OnlyNotLoggedAllowed)

new Vue({
    router
}).$mount("div#application")

将函数TryLogin() 添加到router.beforeEach(..) 是否愚蠢？每次页面更改后的 AJAX 调用并不是很聪明。

但我有问题，因为我的TryLogin() 函数中的this.$http 返回undefined。

或者，如果没有其他方法，也许我应该使用原始 AJAX 调用。

毕竟我会让这个调用同步。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

使用 jQuery 并不丢人，例如，用于 ajax 调用。

如果你有一个全局存储（这里使用 vuex），你可以在第一个 TryLogin 之后将布尔值设置为 true，这样你就不会在进一步更改路由后多次调用它。类似的东西：

import Vue from 'vue';
import Router from 'vue-router';
import store from './store';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/profile',
      component: Profile,
      meta: {loggedIn: true}
    },
    {
      path: '/signup',
      component: Signup,
      meta: {loggedOut: true},
    }
  ],
});

router.beforeEach(async (to, from, next) => {
  if (!store.state.userLoaded) {
    await $.get('/api/account').then(
      // Gets the user (or null) from the server, and
      // set userLoaded to true in any case
      user => store.commit('updateUser', user),
      err => console.error(err)
    }
  }

  // Check if the user needs to be logged in
  if (to.meta.loggedIn && !store.state.user) {
    return next ({path: '/login', query: {redirectTo: to.fullPath}});
    // Check if the user needs to be logged out
  } else if (to.meta.loggedOut && store.state.user) {
    return next ({path: '/'});
  }
  // We can proceeed
  next();
}

export default router;

无论用户是否实际登录，store.commit('updateUser', user) 都会将 userLoaded 设置为 true。

这里是使用的 vuex 存储示例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    userLoaded: false
  },
  mutations: {
    updateUser: (state, user) => {
      state.user = user;
      state.userLoaded = true;
    }
  }
});

以及主vue文件：

import router from './router';
import store from './store';

new Vue({
    router,
    store
}).$mount("div#application")

【讨论】：